Vue CLI 系列之（一）初始化脚手架

初始化脚手架

Vue CLI【Vue脚手架】

Vue CLI：Vue Command Line Interface

1. 说明

Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。
最新的版本是 4.x。

脚手架版本的选择：一般脚手架选最新版本，注意不要用很新的Vue版本对应比较旧的Vue-cli版本
文档: https://cli.vuejs.org/zh/。

2. 具体步骤

第一步（仅第一次执行）：全局安装@vue/cli【这是个包，安装后会有一个vue命令，该命令用于创建脚手架】。

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目【包含了脚手架和一个Helloworld的例子，所以称为项目】

vue create xxxx

第三步：启动项目

npm run serve

工程启动后控制台会输出如下信息

注：停止工程按两次Ctrl+C即可

备注：

如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org
Vue 脚手架隐藏了所有webpack 相关的配置，若想查看具体的webpack 配置，

请执行：vue inspect > output.js

3. 模板项目的结构

单页面应用

├── node_modules
├── public
│ ├── favicon.ico: 网站的页签图标
│ └── index.html: 整个应用的主页面
├── src
│ ├── assets: 存放静态资源，公共资源
│ │ └── logo.png
│ │── component: 存放组件，除了App组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 整个项目的入口文件【npm run serve一执行完，入口文件就执行了】
├── .gitignore: git 版本管制忽略的配置【配置不想接受git管理的文件或文件夹】
├── babel.config.js: babel 的配置文件【一般不需要我们干预，配置内容参考babel官网】
├── package.json: 应用包配置文件【只要是符合npm规范的工程就会有这个文件，包的说明书】
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件【涉及node.js的包管理器，包含了包的版本（version）、下载地址

（resolved）等信息，该文件的作用是再次安装对应的包时，保证以最快的速度安装到指定版本，如果没有

该文件，包的版本就锁不住了】

index.html中的内容如下

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
	<!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	
	<!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
	
	<!-- 配置页签图标，<%= BASE_URL %>的值是public所在的路径，这么写是为了避免部署项目后可能出现的路径问题 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
	
	<!-- htmlWebpackPlugin.options.title：读取package.json中的name属性，这里就是vue_test  -->
	<!-- 这是Webpack中的一个插件完成的功能 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
	  <!-- 当浏览器不支持JavaScript时， <noscript>标签中的元素就会被渲染-->
	  <!-- 当浏览器支持JavaScript时， <noscript>标签中的元素就不会被渲染，不管是否渲染，整个<noscript>标签都是存在的-->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

package.json文件中的一部分内容如下：

main.js作为入口文件是脚手架配置好的

index.html中未引入main.js，但main.js中的Vue实例却能够正常管理容器，也是脚手架配置好的

main.js中的内容如下

/* 
	该文件是整个项目的入口文件
 */
// 通过ES6的引入语法引入Vue【vue已经安装了，放在了node_modules目录下】
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue'
// 关闭Vue的生产提示
Vue.config.productionTip = false
// 创建Vue的实例对象vm
new Vue({
	// 完成了这个功能：将App组件放入容器中
  render: h => h(App),
}).$mount('#app')

接下来探究main.js中render: h => h(App)这段代码的作用

将main.js中内容改为如下

/* 
	该文件是整个项目的入口文件
 */
// 通过ES6的引入语法引入Vue【vue已经安装了，放在了node_modules目录下】
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue'
// 关闭Vue的生产提示
Vue.config.productionTip = false
// 创建Vue的实例对象vm
new Vue({
	// 完成了这个功能：将App组件放入容器中
  // render: h => h(App),
  template:`<App></App>`,
  components:{App}
}).$mount('#app')

启动后报错（运行版本缺失模板解析器）

拓展：通过ES6模块化语法引入第三方库时引入的是哪个具体的js？

比如引入Vue，引入的时候没有具体到js，仅仅具体到名字，那我们引入的是哪个js呢？

import Vue from 'vue'

所以我们引入的就是vue/dist/vue.runtime.esm.js

vue.runtime.esm.js是Vue的运行版本，缺失了模板解析器，这就导致template配置项是不能被解析的

上述bug的两种解决方法：引入完整版的Vue和使用render函数

引入完整版的Vue

import Vue from 'vue/dist/vue.js'

使用render函数

render是一个必须有返回值的函数，Vue会帮我们调用，而且，render会接收到一个函数createElement，该函数用于创建具体的元素

render的作用：缺失模板解析器的情况下，还想在页面中显示一些内容，可以通过render实现

render函数的完整写法如下

render(createElement) {
	return createElement(App)
}

改写为箭头函数最终简写为

render: createElement => createElement(App)

createElement这个接收的变量我们是可以自己决定的，进而改写为

render: h => h(App)

官方提供的Vue库中包含了很多Vue的版本

Vue的构成：Vue核心功能（生命周期、处理事件等）+模板解析器

模板解析器占了1/3的体积

模板解析器仅仅在开发过程中是有用的，经过webpack打包后Vue中的模板解析器是不应该存在的

去掉模板解析器的Vue版本在经过webpack打包后体积也会更小

Vue精简版本【不包含模板解析器】存在的必要性：

打包后体积更小
Vue中的模板解析器不应该出现在最终的打包文件里

vue-template-compiler用于解析.vue文件中的template标签

两种模块化：ES6、Commonjs

1. vue.js与vue.runtime.xxx.js的区别：
   (1) vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
   (2) vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。