项目搭建
- 1.使用 @vue/cli
- 2.进入@vue/cli官方文档，进行crm学习法
- 3.全局安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli
- 4.检查安装版本
vue --version
- 5.创建一个项目
vue create 路径(路径可用点表示)
vue create vue-demo-1 // 我创建的项目
- 6.根据个人情况使用默认配置，或者手动配置
- 7.出现以下界面是表示配置成功
- 8.根据提示运行
cd vue-demo-1
yarn serve
- 9.Ctrl+单击出现的网址，当出现以下界面表示项目创建成功
- 10.除此之外我们还可以使用CodeSandbox，进行创建vue,注意不要登录。
Vue完整版和非完整版
- vue是目前非常火的一个前端框架，分为完整版和非完整版。
- 我们在BOOtCDN进行引入时，会出现多个版本其中对以下几个版本进行说明
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js"></script>
后缀是runtime.js是非完整版，vue.js是完整版。其中带"min"表示没有注释的版本，体积更小，故时常用的是min的版本。
- 两个版本进行比较
- 通过比较得出：完整版和非完整版的差异主要在于：完整版包含有compiler(编译器)，而非完整版需要搭配vue loader。听起来完整版更加方便，但是事物的两面性就在于完整版体积大，比不完整版大约30%，所以为了更好的客户体验，非完整版成为第一首选。
- 完整版的视图直接写在HTML里或者template里，非完整版要写到render函数里，并用h来创建标签。
// 完整版，写在template
new Vue({
template: '
<div>
{{n}}
<button @click="add">按钮</button>
</div>
'
})
//非完整版，视图使用render函数，并用h函数创建标签
new Vue({
render (h) {
return h('div',[this.n,h('{on:{click:this.add}’,'+1'])
}
})
