Vuejs|Vue全家桶之Vue CLI入门（三） npm|vue-cli|脚手架|javascript|vue.

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')

【Vuejs|Vue全家桶之Vue CLI入门（三）】上面的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: ``, 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脚手架的默认配置。（只是查看，修改无效）