Vue学习Day9 Vue CLI的安装、创建项目、服务、runtime-compiler和runtime-only、路由

最新推荐文章于 2022-09-26 20:28:23 发布

AIpoem

最新推荐文章于 2022-09-26 20:28:23 发布

阅读量142

点赞数

分类专栏： vue学习文章标签： vue vue-cli3 javascript html5

本文链接：https://blog.csdn.net/gegegegege12/article/details/118675120

版权

vue学习专栏收录该内容

38 篇文章 7 订阅

订阅专栏

想利用暑假时间好好学习一下vue，会记录每一天的学习内容。
今天是学习vue的第9天！

起起伏伏乃人生常态，继续加油～

学习内容

1. Vue CLI的介绍和安装
- 什么是Vue CLI
- Vue CLI的安装
2. Vue CLI创建项目
3. CLI服务
- vue-cli-service serve
- vue-cli-service build
4. runtime-compiler和runtime-only
5. Vue CLI配置文件的查看
- 修改默认配置
6. 路由和其中映射关系

1. Vue CLI的介绍和安装

什么是Vue CLI

如果只是简单写几个vue的demo，那么不需要Vue CLI
如果在开发大型项目，那么必然需要使用Vue CLI

使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情
如果每个项目都要手动完成这些工作，那么效率较低，所以通常我们会使用一些脚手架工具来帮助完成这些工作

CLI是什么意思？

CLI 是 Command-Line Interface，翻译为命令行界面，但是俗称脚手架
Vue CLI是一个官方发布vue.js项目脚手架
使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置

使用Vue CLI前确保已经安装好了NodeJS和Webpack

Vue CLI的安装

npm install -g @vue/cli

(Mac要先用sudo -s获取root权限)

2. Vue CLI创建项目

vue create 项目名称

可以用于创建一个新项目
之后会被提示选取一个preset
在这里插入图片描述
选择前两项，则默认包含了基本的 Babel + ESLint 设置的preset，第三项是“手动选择特性”来选取需要的特性
默认的设置可以快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。
在这里插入图片描述

3. CLI服务

vue-cli-service serve

vue-cli-service serve命令会启动一个开发服务器（基于webpack-dev-server），并附带开箱即用的模块热重载(修改后自动刷新)
实际上在package.json文件中，已经自动帮我们配好了更简单的启动方式
在这里插入图片描述
在终端输入npm run serve

vue-cli-service build

vue-cli-service build会生成一个dist文件夹，里面带有JS/CSS/HTML的压缩包
在这里插入图片描述
同样可以通过一种更简单的方法启动：
npm run build

4. runtime-compiler和runtime-only

使用Vue CLI2脚手架创建一个项目时，会遇到一个构建选项Vue build，有两个选项：

Runtime + Compiler：recommended for most users
（运行程序+编译器：推荐给大多数用户）
Runtime-only：about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere
（仅运行程序：比上面那种模式轻大约6KB min+gzip，但是templates或任何特定于vue的html只允许在.vue文件中使用，其他地方需要使用render函数）

这两个选项创建的项目的文件差别只在其生成的main.js文件里

主要差别：
Runtime + Compiler：

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

Runtime-only：

new Vue({
  el: '#app',
  render: h => h(App)
})

先来看看vue的程序运行过程：
在这里插入图片描述
template模版会parse(解析)成ast(abstract syntax tree抽象语法树)，ast再编译成render函数，通过render函数，把template翻译成virtual dom(虚拟dom)，再将虚拟dom渲染到页面上

结合上面main.js中的代码部分，会发现：

Runtime + Compiler：
template => ast => render => virtual dom => UI
Runtime-only：（性能更高）
render => virtual dom => UI

简单总结：

之后开发中，依然使用template，选择Runtime + Compiler
之后开发中，使用的是.vue文件夹开发，选择 Runtime-only

5. Vue CLI配置文件的查看

通过vue ui命令，打开一个图形化界面

进来之后可以管理这个项目，（不用通过命令行了
找到目录下的node_modules/@vue/cli-service文件夹，会发现里面有一个webpack.config.js文件

这个文件导入了./lib/Service.js文件，部分配置就被隐藏在这里，这其中也导入了很多其他文件，总之都在本目录下的一些文件夹中