Vue学习11之脚手架

开发大型项目，需要使用的Vue CLI。

因为：Vue.js直接开发需要考虑结构部署、目录结构、热加载、测试单元等等等都需要配置，效率太低，使用脚手架可以帮助我们自动生成好。

　　建筑上的脚手架：

 

 　　首先电脑上一定要安装了node和npm，直接在cmd中输入node就可以检测。版本最必须要9以上的版本。

　　然后全局安装脚手架3：

npm install -g @vue/cli

　　下载起来感觉有点慢查了一下改一下淘宝镜像就能快不少。安装完成后可以通过vue --version来查看版本。我tm竟然报错了说有些文件已经存在还是咋的，不能惯着直接--force安装成功。

　　脚手架2项目创建需要输入特定指定：

vue init webpack my-project

　　脚手架34项目创建需要：

vue create 项目名称

　选项中有这么一个选项：

　

 

 　　建完了项目可以看到文件夹已经生成了。

　　从package.json开始读 dev命令和build 命令。

 

 build 中做了这样一个事情，用node直接执行了build下面的build.js文件。build.js部分代码如下：

 

 导入了很多的包，然后在webpack.prod.conf.js中合并了很多基础配置，还有很多插件。

editorconfig文件中写了一些语法规范，eslintignore文件中对一些代码进行忽略（里面写的文件的代码忽略语法检测）。gitignore代表上传的时候需要忽略的不需要的文件。postcssrc.js不需要改动，是css转化相关的。

index.html是一个模版，package.json负责管包。package-lock.json记录真实版本。

 

　　接着说脚手架的知识：

 

 　　这是main.js中创建实例的一个代码，这里el的app对应index.html文件中的app：

 

 　　可以卡到这个文件里面什么都没有，因为mian中还有个template，里面的内容将会替换掉index中div的内容。这个内容是App.vue里面的：

 

 　　这里面就template script 和 style模版。这里看到有个helloworld的组件已经被导入了：

 

 　　所以helloworld的内容才会被显示。

　　

　　vue程序运行过程;

　　template模版传入一个实例后options做一个保存，之后给template进行一个解析（parse），然后做一个编译（编译成render函数），然后就把template翻译成虚拟dom树，再把虚拟dom树渲染成一个真实的dom树。

　　template->ast->render->virtual dom->真实dom

　　在runtimecomplier中就是这样执行的，但是在runtimeonly中，从render直接到虚拟dom直接到ui，所以runtimeonly中性能更高，且使用的代码更少。差异在这里

 

 　　vue-cli3:

　　设计原则是0配置，移除了build和config的文件。提供了可视化配置，增加了一个public文件替代static文件。先创建一个脚手架3：

vue create my-project

　　

 

 　　node-modules保存这包，public保存资源到时候原封不动的复制到dist文件夹里，src里包含着源代码，package.json根据里面的信息在打包的时候下载相应的东西。

　　

 

 　　这里告诉我们serve命令是运行的（不是dev），build命令是打包的。下面这个是main.js代码

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

　　config.productionTip是提示信息是否显示。下面显示的意思是最终页面被render内容替换掉。

　　那么配置去那里了呢？

　　使用vue ui 命令可以打开一个vue项目管理器：

　　

 

 　　导入项目后，可以看到很多配置的东西，例如插件信息：

 

 　　还有项目依赖信息：

 

 项目配置：