1. 搭建项目之前，请确认好你自己已经安装过node, npm, vue cli。没安装的可以参考下面的链接安装。
安装好node默认已经安装好npm了，所以不用单独安装了。
vue-cli2:
npm install vue-cli -g
vue-cli3/cli4:
npm install -g vue@cli
vue引用各种资源在网速不太理想的情况下，可能比较慢，推荐安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
2. 创建新项目
- vue-cli2:
vue init webpack 2.0project
- vue-cli3/cli4:
vue create 3.0project
3. 启动项目
- vue-cli2:
npm run dev / cnpm run dev
- vue-cli3/cli4:
npm run serve / cnpm run serve
在这里，推荐使用2.0版本：
cli2个性化强一些，可以更友好的配置webpack；cli3通用性强一些，达到真正的开箱即用，几乎零配置，已经将最适合开发的配置打包封装。
两者都可以符合开发需求，个人比较熟悉cli2版本。
两者区别
4. mvvm简单介绍
众所周知vue是一个MVVM 渐进式框架，MVVM是vue的设计模式，在vue框架中数据会自动驱动视图。
View是视图，就是DOM；对应视图也就是HTML部分--代表UI组件，它负责将数据模型转化成UI展现出来。 Model是模型，就是vue组件里的data，或者说是vuex里的数据；--代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 ViewModel--监听模型数据也就是data的的改变和控制视图行为、处理用户交互，简单理解就是一个同步View和Model的对象，连接Model和View。
在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewMode进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。
ViewModel通过双向数据绑定把View层和Model层连接了起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。
Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty中的访问器属性中的 get和 set方法
5. vue的生命周期
beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted
el 被新创建的 vm.el 也在文档内。
beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
activated
keep-alive 组件激活时调用。
deactivated
keep-alive 组件停用时调用。
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
举例：login.vue
<template>
<div class="login_wrapper">
<div class="login">
<el-form :model="formLogin">
<el-form-item>
<h2 class="title">K&C DESIGNER</h2>
</el-form-item>
<el-form-item>
<el-input v-model="formLogin.mobile" placeholder="账号"></el-input>
</el-form-item>
<el-form-item>
<el-input type="password" v-model="formLogin.password" placeholder="密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登陆</el-button>
<span v-show="this.errorInfo.isShowError" class='error'>
{{this.errorInfo.text}}
</span>
</el-form-item>
</el-form>
</div>
</div>
</template>
<style lang="scss" scoped>
$input_width:300px;
.login_wrapper {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: url(../../static/img/login1.jpg) no-repeat center top;
background-size: cover;
.login {
width: 420px;
height: 326px;
border: 1px solid #393939;
box-shadow: 0 0 25px #393939;
background-color: rgba(0,0,0,0.5);
border-radius: 10px;
.forget-password {
font-size: 14px;
cursor: pointer;
color: #20A0FF;
}
}
</style>
<script>
import apis from '../apis/apis';
export default {
name: 'login',
data() {
return {
formLogin: { //表单对象
mobile: '',
password: ''
},
errorInfo: {
text: '登陆失败,请重试',
isShowError: false //显示错误提示
}
}
},
mounted() {
document.onkeydown = (event) => {
let router = this.$route.path;
let e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 13 && this.$route.path == '/login') {
// enter 键
this.login();
}
};
},
methods: {
toForget() {
this.$router.replace({
path: "/forgetPassword"
});
},
login() {
//调用后端登陆接口
apis.loginIn(this.formLogin)
.then((data) => {
if (data && data.data) {
}
})
.catch((err) => {
this.errorInfo.isShowError = true;
this.errorInfo.text = '系统接口异常';
});
}
}
}
</script>
5. vue组件
组件概念：
html、css与js的集合，为该集合体命名，用该名字复用html、css与js组成的集合体构成复用性。
组件分类：
根组件：new Vue()生成的组件
局部组件：组件名={}，{}内部采用的是部Vue语法
全局组件：Vue.component（‘组件名’，{}），{}内部采用的是Vue语法
组件的特点：
1、组件都有管理组件HTML页面结果的template实例成员，template中有且只有一个根标签；
2、根组件都是作为最顶级层的父组件，局部与全局组件作为子组件，也可以成为其他局部与全局父组件；
3、子组件的数据需要隔离(数据组件化，每一个组件拥有自己的数据独立名称空间)；
4、局部组件必须注册后才能使用，全局组件不需要注册，提倡使用局部组件
简单举例组件使用：
定义需要被引入的组件YesOrNoSelect.vue
<template>
<select>
<option v-for="item in options" v-bind:key="item.id">{{item.text}}</option>
</select>
</template>
<script>
export default {
name: 'YesOrNoSelector',
data () {
return {
options: [
{id: '', text:'全部'},
{id: 0, text:'否'},
{id: 1, text:'是'}
]
}
}
}
</script>
<style scoped>
select {
width: 100px;
height: 30px
}
</style>
注册组件
在main.js中全局注册
import YesOrNoSelect from '@/components/YesOrNoSelect'
Vue.component('yes-or-no-select', YesOrNoSelect)
或者在HelloWorld.vue中局部注册
<script>
import YesOrNoSelect from '@/components/YesOrNoSelect'
export default {
name: 'HelloWorld',
components: {
YesOrNoSelect
}
}
</script>
使用自定义的组件 HelloWorld.vue
<template>
<div>
YesOrNo: <yes-or-no-select />
</div>
</template>
<script>
import YesOrNoSelect from '@/components/YesOrNoSelect'
export default {
name: 'HelloWorld',
data () {
return {
}
}
}
</script>
