VueCLI相关

2023-12-17 18:18:40

目录

VueCLI相关
Vue CLI2创建项目时配置
Vue CLI3创建项目时配置
runtime compiler与runtime-only的区别
Vue CLI3配置文件的查看和修改

VueCLI相关

什么是Vue CLI

如果你在开发大型项目，那么你需要，并且必然需要使用Vue CLI
- 使用Vue.js开发大型项目时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
- 如果每个项目都要手动完成这些工作，那么效率比较低效，所以我们通常会使用一些脚手架工具来帮助完成这些事情。
CLI：
- Command-Line Interface，翻译为命令行界面，但是俗称脚手架
- Vue CLI 是一个官方发布vue.js项目脚手架
- 使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置
- 命令行界面：只要输入几个简单的命令就可以完成一些配置(router等)

Vue CLI使用前提 - Node、Webpack

Vue CLI的使用

安装脚手架(一般安装到全局即可)
```
npm install -g @vue/cli
```
- vue脚手架3的基础上可以拉取脚手架2的，所以没必要单独安装脚手架2
- 上面安装可能失败，建议安装cnpm，后安装vue3.2.1
```
npm install -g cnpm -registry=https://registry.npm.taobao.org
// 环境变量的问题请百度
npm install -g @vue/cli@3.2.1
```
注意：上面安装的是VueCLI3的版本，如果需要想安装VueCLI2的方式初始化项目是不可以的。

拉去2.x模板(旧版本)
Vue CLI2初始化项目
```
vue init webpack my-project
```
Vue CLI3初始化项目
```
vue create my-project
```
注意：到要创建项目的目录下，cmd执行命令，或者直接在idea中执行

Vue CLI2创建项目时配置

目录结构
- build、config配置文件
- node_modules：package打包的依赖
- src：代码相关
- static：静态资源，会原封不动的放到dist文件夹下
- .babelrc：当配置了Babel转换代码时，配置此文件，默认转换[市场份额大于1%的，最后两个版本，ie>8的]

Vue CLI3创建项目时配置

vue-cli3与2版本有很大区别
- vue-cli3是基于webpack4打造,vue-cli2还是webpack3
- vue-cli3的设计原则是"0配置", 移除配置文件根目录下的build和config等目录
- vue-cli3提供了vue ui命令, 提供了可视化配置, 更加人性化
- 移除了static文件夹, 增加了public文件夹, 并且index.html移动到public中
目录结构
- node_modules: package打包的依赖
- public: 相当于以前的static
- src: 源代码
- .browserverslistrc: 浏览器限制配置相关
- .postcss.config.js: 修改css相关

runtime compiler与runtime-only的区别

当把一个模板传给Vue的时候，会把template在vm.options中做一个保存
把template解析成ast(abstract syntax【抽象语法树】)
把ast编译成render函数
把template最终翻译成虚拟DOM树(再显示成真正的UI)
虚线部分为数据的监听，双向绑定

如果使用runtime-compiler

tempalte -> ast -> render -> vdom -> UI

如果使用runtime-only：优点：性能更高，体积更小
```
render -> vdom -> UI
```
h：createElement函数

createElement('标签', {属性：属性值;属性: 属性值}, ['值1', '值2'])
那么将来开发中,依然使用template,就需要选择Runtime-Compiler
如果使用.vue文件开发,那么可以选择Runtime-only

Vue CLI3配置文件的查看和修改

UI方面的配置
- 启动配置服务器:
```
vue ui
```
- node_modules > @vue > cli-service >webpack.config.js只能查看
- 修改配置: 创建vue.config.js文件: