vue 入门
作者：互联网
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