标签：vue 入门 Vue install 组件 安装 template
idea、webstorm、vsCode，都可以开发吧，脚手架vue-cli项目框架一搭建，就写代码了
-- 关于vue需要掌握的知识点---
使用的开发工具是webstorm，它是默认就安装好了vuejs插件，idea要使用的话，需要安装一下该插件
一、快速搭建项目vue-cli 脚手架（Vue2.0）
1、Vue CLI使用前提 –Node、 Webpack
(1) 安装 nodejs并通过npm 安装 cnpm：
https://www.cnblogs.com/shan333/p/15726428.html
(2) 安装webpack（全局安装）：
# 不写版本号，默认是安装最新的版本号
cnpm install webpack@3.6.0 -g 或 npm install webpack@3.6.0 -g
(3) 安装vue脚手架（vue-cli 版本是3.xx）：
# 不写版本号，默认是安装最新的版本号
cnpm install @vue/cli -g 或 npm install @vue/cli -g
● 通过拉取模板就可以使用2.x版本(vue-cli2、vue-cli3任你选)：
npm install -g @vue/cli-init 或 cnpm install -g @vue/cli-init
■ 本地安装与全局安装区别：
- 本地安装：仅将webpack安装在当前项目的node_modules目录中，仅对当前项目有效。
- 全局安装：将webpack安装在本机，对所有项目有效，全局安装会锁定一个webpack版本，该版本可能不适用某个项目。全局安装需要添加 -g 参数。
2、初始化Vue-cli2项目、Vue-cli3项目：
- 初始化Vue-cli2项目：
vue init webpack my-project
- 初始化Vue-cli3项目：
vue create my-project
runtime-compiler 和 runtime-only的选择：选 runtime-only
■ Vue-cli2项目、Vue-cli3项目区别：
仅仅只是vue-cli3会把node_modules 隐藏起来。
开发好项目，上传代码时node_modules 是不用上传上去的，只需要在readme提醒别人通过 npm install 命令即可在目录创建node_modules。
3、启动项目：
- 启动项目前先打包，再启动：
# 打包命令
npm run build
- Vue-cli2项目：
npm run dev
- Vue-cli3项目：
npm run serve
二、vue的浏览器调试插件 vue-devtools
像普通插件一样安装到浏览器即可
9、插槽slot 在vue中看到$:代表使用但是是vue自身的属性或者是挂载到vue上的插件(比如route)的属性，目的是为了和咱自己定义的变量做一个区分 安装插件命令：npm install （若失败，可以使用cnpm install） # npm install --save 插件名# 安装路由npm install vue-router --save# 安装vuexnpm install vuex --save# 安装element-uinpm i element-ui -S# npm install# 安装axiosnpm install axios --save-dev 的话，安装到node_modules 目录中，并在devDependencies 节点下添加上依赖，-dev是在开发时需要用的，部署不需要，一般是一些打包压缩工具和一些格式转化工具四、组件1、什么是组件化Vue的组件化设计思想借鉴了Java的面向对象思想。Java认为万物皆对象，在Vue中，万物皆组件。也就是说，在实际的vue项目中，以及使用了Vue框架的项目中，Vue的对象都会以组件的形式出现，能被反复使用。要想实现组件化，需要在页面中注册组件。关于注册的方式有两种，分别是全局注册和本地注册。2、注册全局注册和本地注册区别：全局注册可以在任何Vue根实例里面使用；而本地(局部)注册只能在绑定它的父组件中使用。一般项目中只有一个Vue根实例(全局注册)，其他组件都是局部注册的。全局注册：<div id="app">
<grob></grob>
</div>
<script>
// 注册
Vue.component('grob', {
template: '<h1>自定义组件!</h1>'
})
// 创建根实例Vue
new Vue({
el: '#app'
})
</script>本地(局部)组件<div id="app">
<localV></localV>
</div>
<script>
// 注册
var Child = {
template: '<h1>自定义组件!</h1>'
}
// 创建根实例
new Vue({
el: '#app',
components: {
// <localV> 将只在父模板可用
'localV': Child
}
})
</script>3、模板占位符 template(1) template 用于包裹元素，template 不会被渲染到页面上 template:每个组件文件中的根template，也就是最外层的template 只能有一个根元素，可以是div，也可以是其他元素。 即组件模板只能有一个根元素（通常是一个div）！ 非根template没有限制，可以有多个。 <img src="https://pica.zhimg.com/50/v2-f631483de4ee9bb395cfdc7f1a9b9cc2_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="523" data-rawheight="431" data-default-watermark-src="https://pica.zhimg.com/50/v2-c764105a7c705439592359e7aab82b61_720w.jpg?source=1940ef5c" class="origin_image zh-lightbox-thumb" width="523" data-original="https://pic4.zhimg.com/v2-f631483de4ee9bb395cfdc7f1a9b9cc2_r.jpg?source=1940ef5c"/>template用于创建单文件组件，实际上是一种原子化的设计，可以一次定义，然后在任何地方生成dom，如果有多个子元素，就违背了这种原子设计，也就是说，一个template就只会渲染一个子组件树。vue在动态创建dom的时候，会将template中的子元素作为入口进行创建，根据这个入口，遍历以该子元素作为根节点的整个节点树，然后创建虚拟dom。如果template有多个子元素，那么vue就无法获取确切入口。(2) template作用：通过template，vue文件实现了结构的分层 html视图层、css样式层、js层举例 Home.vue 文件：<template>
<div id="home">
<el-container>
<base-header :activeIndex="activeIndex"></base-header>
<router-view class="me-container"/>
<base-footer v-show="footerShow"></base-footer>
</el-container>
</div>
</template>
<script>
import BaseFooter from '@/components/BaseFooter'
import BaseHeader from '@/views/BaseHeader'
export default {
name: 'Home',
data (){
return {
activeIndex: '/',
footerShow:true
}
},
components:{
'base-header':BaseHeader,
'base-footer':BaseFooter
},
beforeRouteEnter (to, from, next){
next(vm => {
vm.activeIndex = to.path
})
},
beforeRouteUpdate (to, from, next) {
if(to.path == '/'){
this.footerShow = true
}else{
this.footerShow = false
}
this.activeIndex = to.path
next()
}
}
</script>
<style>
.me-container{
margin: 100px auto 140px;
}
</style>4、组件的生命周期(1) 钩子函数Vue中的组件是有生命周期的。每个生命阶段会有相应的生命周期钩子函数被调用。在vue中分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。(2) Vue生命周期函数使用场景beforeCreate （使用频率低） * 在实例创建以前调用 * 没有实例化，数据访问不到
标签：vue,入门,Vue,install,组件,安装,template 来源： https://www.cnblogs.com/zeenzhou/p/16597410.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。