Vue全家桶之Vue CLI入门（三）

Vue全家桶之Vue CLI入门

1 初始化脚手架

1.1 说明

• CLI是Command-Line Interface, 翻译为命令行接口, 但是俗称脚手架。
• Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。
• 使用 Vue-CLI 可以快速搭建Vue开发环境以及对应的webpack配置，简化了程序员基于webpack 创建工程化的Vue 项目的过程 。
• 最新的版本是 5.x （截至2022年2月）。
• 文档: https://cli.vuejs.org/zh/。

1.2 安装具体步骤

1.2.1 安装node.js

在使用npm安装Vue的脚手架之前，要确保已经下载了npm。安装npm首先需要安装Node.js，Node.js自带了软件包管理工具npm。

• 我安装的Node.js是14.15.0版本（安装5.0版本需要 Node.js 12及以上）
• 所有nodejs历史版本的链接： https://nodejs.org/dist/
• 找到14.15.0，里面是 nodejs V14.15.0所有类型安装文件
• .msi 使用这个不用配置环境变量
• .zip 解压即可用，但是需要配置环境变量
• 我这里下载 .msi 后缀文件

安装Node.js具体过程

• 双击下载完成的 node-v14.15.0-x64.msi ,点击next

• 勾选同意

• 更改为你认为合适的安装路径

• 点击next

  npm package manage 表示 npm包管理器
  online documentation shortcuts 在线文档快捷方式
  Add to Path 添加 node 安装路径到环境变量
  这就是.msi 不需要手动添加环境变量的原因，node已经帮我们配置好了

• 是否勾选工具去编译 native 模块，不勾选

• 点击 install

• 等待安装完毕

验证Node.js安装是否成功

使用管理员方式打开dos窗口，输入 node -v ，显示如下图，则安装成功。

1.2.2 更改淘宝镜像

• 管理员方式打开DOS窗口，输入

npm config set registry https://registry.npm.taobao.org

• 点击回车就更换成功了，可以通过

npm config get registry

上面命令去查看是否成功，如果返回是

则成功。

1.2.3 全局安装@vue/cli

这里安装的脚手架版本号是4.5.13，也可以安装Vue CLI5的。

• 第一步（仅第一次执行）：全局安装@vue/cli。 打开dos窗口，输入npm install -g @vue/cli@4.5.13，安装过程会有一些警告。 安装后重新打开dos窗口，输入vue查看。
  
• 第二步：切换到你要创建项目的目录，然后使用命令创建项目 vue create xxxxx ，选择Vue 2，默认会创建一个helloworld的项目。
  
  
• 第三步：在要运行的项目目录下面，比如我这里的目录是C:\Users\86137\Desktop\vue_test，输入 npm run serve 启动项目 。
  
  在浏览器输入网址访问。
  

1.3 脚手架文件结构

文件结构

结构说明

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

2 关于不同版本的Vue

2.1 render函数

查看刚才创建项目里面的入口文件main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
  render: h => h(App),
}).$mount('#app')

上面的render函数采取了箭头函数的简写形式，其实该渲染函数会接收一个 createElement 方法作为第一个参数用来创建 VNode。

new Vue({
      render(createElement) {
        //不加引号为变量
        //return createElement(App)
        //加引号为HTML标签
        return createElement('h1','你好啊')
    }
}).$mount('#app')

所以main.js中的render完整写法应该是：

new Vue({
  //h其实就是createElement
  render(h) {
      return h(App)
  }
}).$mount('#app')

2.2 为什么使用render

根据上面的分析，可以发现new Vue中有一个render函数，如果按之前的写法，我们应该会将main.js写成如下的格式：

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
  template: `<App></App>`,
  components: {App},
}).$mount('#app')

然后可以在vscode控制台输入npm run serve（vscode需要安装Vetur插件.vue文件代码才有高亮）

按网址打开浏览器后发现控制台有如下警告

出现上述警告的原因，vue提示是因为缺乏模板解析器，这是因为项目中使用的vue是精简过的vue，它没有模板解析器。

看下图，可以发现dist目录下有各种vue，之所以不使用完整版的vue.js，是因为在开发完成后，借助webpack打包后，已经将.vue文件翻译成.js文件，该解析的模板都解析完了，已经不需要模板解析器了，所以使用运行版的vue。

所以，在使用没有模板解析器的vue时，需要用借助render函数，作为字符串模板的代替方案。

2.3 总结

1.vue.js与vue.runtime.xxx.js的区别：

• vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
• vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。

3 Vue.config.js配置文件

1.使用vue inspect > output.js可以查看到Vue脚手架的默认配置。（只是查看，修改无效）

2.使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

比如通过配置vue.config.js可以更改入口文件和关闭语法检查。