使用vue-cli（vue脚手架）快速搭建项目(2)

2、评论区评论：通过random函数，随机抽取两名；

【注意】想加入微信群聊，可以扫描主页左侧二维码、私信与我、加本人微信guo_rui_

1、《亿级流量Java高并发与网络编程实战》

2、《分布式一致性算法开发实战 媒体宣传文案》

3、《Java多线程与大数据处理实战》

4、《深入浅出TCPIP和VPN》 

目录

一、什么是VueCLI

1、如果你只是简单写几个Vue的Demo程序，那么你不需要VueCLI脚手架。

2、如果你在开发大型项目，那么你需要，并且必然需要使用VueCLI。

3、CLI是什么意思？

4、脚手架长什么样？

5、脚手架依赖于node.js和webpack

二、安装Vue CLI脚手架

三、runtime-compiler和runtime-only的区别

1、runtime-compiler加载过程

2、runtime-only加载过程：（性能更高，代码更少）

3、小结

4、代码实例

5、npm run build执行过程

6、npm run dev执行过程

四、认识Vue CLI3

1、vue-cli 3 与 vue-cli 2 版本的区别？

2、通过脚手架3构建项目

五、箭头函数

1、定义函数的三种方式

2、箭头函数参数和返回值

3、什么时候使用箭头函数

4、箭头函数与this

六、前端路由vue-router

1、维基百科

2、路由的机制

3、后端渲染

4、后端路由阶段

5、前后端分离

6、单页面富应用阶段

7、SPA页面

8、前端路由

七、改变URL，但是页面不进行整体的刷新

1、URL的hash

2、HTML5的history

---

一、什么是VueCLI

---

1、如果你只是简单写几个Vue的Demo程序，那么你不需要VueCLI脚手架。

2、如果你在开发大型项目，那么你需要，并且必然需要使用VueCLI。

1. 使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。

2. 如果每个项目都要手动完成这些工作，那么无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

3、CLI是什么意思？

1. CLI是Commond-Line Interface，翻译为命令行界面，俗称脚手架。

2. VueCLI是一个官方发布vue.js项目脚手架。

3. 使用VueCLI可以快速搭建vue开发环境以及对应的webpack配置。

4、脚手架长什么样？

5、脚手架依赖于node.js和webpack

二、安装Vue CLI脚手架

---

//默认安装脚手架3

npm install -g @vue/cli

//安装脚手架2

npm install -g @vue/cli-init

//脚手架2创建项目

vue init webpack my-project

//脚手架3创建项目

vue create my-project

三、runtime-compiler和runtime-only的区别

---

1、runtime-compiler加载过程

template -> ast -> render -> vdom -> UI

2、runtime-only加载过程：（性能更高，代码更少）

render -> vdom -> UI

3、小结

如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler；

如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only；

4、代码实例

main.js

import Vue from ‘vue’

import App from ‘./App’

Vue.config.productionTip = false

/* eslint-disable no-new */

// const cpn = {

// template: ‘

{{message}}

’,

// data() {

// return {

// message: ‘我是组件message’

// }

// }

// }

new Vue({

el: ‘#app’,

render: function (createElement) {

// 1.普通用法: createElement(‘标签’, {标签的属性}, [‘’])

// return createElement(‘h2’,

// {class: ‘box’},

// [‘Hello World’, createElement(‘button’, [‘按钮’])])

// 2.传入组件对象:

return createElement(App)

}

})

App.vue

index.html

5、npm run build执行过程

6、npm run dev执行过程

四、认识Vue CLI3

---

1、vue-cli 3 与 vue-cli 2 版本的区别？

1. vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3

2. vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录

3. vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化

4. 移除了static文件夹，新增了public文件夹，并且index.html移动到public中

2、通过脚手架3构建项目

vue create my-project

运行项目

npm run serve

注意：

之前学习的时候main.js

import Vue from ‘vue’

import App from ‘./App.vue’

Vue.config.productionTip = false

new Vue({

el: ‘#app’,

render: h => h(App)

})

通过 Vue CLI3创建的项目main.js

import Vue from ‘vue’

import App from ‘./App.vue’

Vue.config.productionTip = false

new Vue({

render: h => h(App)

}).$mount(‘#app’)

两种写法没区别。

el多了一个判断，el被解析为$mount。

五、箭头函数

---

1、定义函数的三种方式

2、箭头函数参数和返回值