VUE2 学习笔记11 脚手架

脚手架

Vue脚手架（Vue CLI）（其中CLI是command line interface，是指命令行接口工具，但一般称其为脚手架）是Vue官方提供的标准化开发工具。脚手架是向下兼容的，一般不会由于版本过新导致问题，可以使用最新版本。

使用脚手架构建项目的步骤：

1.安装Vue CLI

想要使用Vue脚手架，首先需要全局安装@vue/cli

npm install -g @vue/cli

如果想验证@vue/cli包是否安装成功，可以在命令行中通过敲vue -V确认。

@vue/cli包只需要安装一次。每次构建项目时不需要重新安装。

2.切换到项目目录，创建Vue项目

vue create 项目名

按回车之后可以选择创建的Vue版本。

其中，babel 用于把ES6转换为ES5。eslint 用于语法检查。

3.运行

cd 项目文件夹

vue run serve

分析脚手架生成的项目的结构：

.gitignore 设置git的忽略文件，如果文件不希望git进行管理，在这个文件里配置就可以。

babel.config.js 是babel的控制文件，但一般不需要开发者自己配置

package.json 包的说明书，配置了包的名字、版本、依赖、库、命令等。

        npm run serve指令的就是serve对应的配置命令。

        serve 运行项目。

        build 构建，用于把项目打包成.html文件，当整个项目写完后，希望把项目编译成浏览器能识别的内容时使用。

        lint 用于语法检查，会对项目中所有的.js和.vue文件进行语法检查。

package-lock.json  为lock文件，用于包版本控制。记录了包的安装版本，以及下载地址，可以锁住包的版本。当需要下载包的时候，会按照lock文件中记录的版本进行下载。

--public

       ---favicon.ico 网站页签图标

       ---index.html 整个应用的页面。在这个页面的head标签中，有针对IE浏览器的特殊配置，可以使IE浏览器以最高的渲染级别渲染页面。有开启移动端理想视口的代码。有引入页签图标的代码，而且href设置为<%= BASE_URL %>favicon.ico。这种格式比较怪异的配置是因为Vue考虑到项目实际部署时，‘./’等类型的路径可能引起各种奇奇怪怪的路径错误问题。因此在index.html，最好不要使用./等相对路径来进行配置。使用<%= BASE_URL %>可以获取public路径，相当于./。

                        有配置网页标题的代码。<%= htmlWebpackPlugin.options.title %>获取的是package.json中配置的name。

                        在body标签中，首先是noscript标签，对浏览器不支持js、或js被关闭的情况进行处理。然后是App容器。

--src

       ---assets 一般存放静态资源（图片、视频等）

       ---components 组件文件，除了App.vue，所有其他开发的组件都可以写在这个文件里。

       ---main.js 当执行完npm run serve之后，main.js就会被直接运行，是项目的入口文件。在main.js中，默认代码会先引入Vue和一个管理其他所有组件的父组件App。并创建Vue实例对象。render用于将App组件放入容器中，使用render语法，可以在不写App组件注册的情况下显示App组件（但不同版本的Vue中，main.js初始情况下包含的代码可能不一样，这里的说法只适合Vue2）。

        ---App.vue 

new Vue : render配置项

对于入口文件，以import Vue from 'vue'形式引入的Vue，默认并不是完整版Vue。在这种情况下，如果在new Vue中配置template，会引发报错。（可以通过在package中设置module配置项来表示Vue引入哪个Vue.js文件）

在这种情况下，一种解决方法，是引入完整版Vue，需要引入vue/dist/vue。

另一种解决方法，是在没有template的情况下，使用render配置模板。render代表渲染，render的非简化形式是一个函数，且函数具有一个参数createElement，这个参数也是一个函数，调用createElement时，参数的形式是（标签名（字符串格式），标签内的内容）或者（组件），把这个函数的返回值在render函数中进行返回，就能完成标签或者组件的渲染。

而在render的简写形式中，h就是createElement。

new Vue({//render: h => h(App),render: (h) => {//return createElement('div','123');return h(App)}
}).$mount('#app')

再简化一点，就是这种形式：

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

为什么会有render：Vue的js文件由Vue核心和Vue模版解析器构成，Vue模板解析器的代码体积并不小，如果Vue不提供非完整版的Vue，在项目打包之后，打包生成的文件中也含有Vue的Js文件，并且这个文件也是由Vue核心和Vue模板解析器构成，而且，由于文件已经打包完成，并不需要Vue模板解析器了。设计非完整版Vue，就是希望在打包时减少代码体积。

在Vue文件中，在带有runtime的Vue.js中，都没有Vue模板解析器。为了完成这种代码体积的减少，就需要配置render来弥补。

对于Vue脚手架的配置文件，很多配置文件是默认隐藏的。通过Vue inspect > 输出文件名（js文件）的形式，可以以一个js文件的形式输出所有配置项。但在输出的文件中，是无法修改配置项的，这个文件只是已有配置项的整合。

脚手架默认配置：在不修改默认配置的情况下，Vue的文件结构中，很多内容是无法进行修改的：public文件中的文件名无法修改；src不能修改；main.js入口文件名无法修改。

如果想修改这些内容，就需要自己先修改配置。这些配置都需要在Vue.config.js文件中进行配置。

从Vue文档，进入Vue CLI文档：，在Vue CLI文档的配置参考页面，可以学习如何配置Vue.config.js

与在入口文件设置的Vue.config.productionTip = false不同，Vue.config.productionTip = false这条语句的含义是往Vue构造函数的一个属性config上配置一些内容，调整的是Vue这个库在运行时遵循何种配置，和用Vue.config.js进行配置的内容之间并无关联。

Vue最终会把Vue.config.js文件输送给Webpack，Webpack基于Node.js，Node.js的模块化是基于Common.js，因此在Vue.config.js中，也使用Common.js语法。使用module.exports进行暴露。

脚手架会把Vue.config.js中的配置，和Webpack中的配置进行合并，对于同一个配置项，如果在Vue.config.js和Webpack中都配置了，最终Vue.config.js的配置会覆盖Webpack的配置，也就是说，虽然无法直接修改Webpack的配置文件，但是可以通过在Vue.config.js文件中进行配置，对已有配置进行覆盖（在Vue.config.js文件中，并不是所有的配置项都可以进行配置，而Webpack配置文件开发者无法直接访问，这就保护了Webpack核心配置项不会被开发者随意修改）。

对于Vue.config.js的配置项，如果设置了配置项，配置项的内容就一定要写，否则会报错。

在Vue.config.js中，存在常用的配置项：

配置取消语法检查：lintOnSave:false,