Vue-Vue CLI 脚手架-4

使用前提

Node

安装-进入官网下载

网址: http://nodejs.cn/download/

检测安装的版本
npm -v

Node环境要求8.9以上或者更高版本

• 默认情况下自动安装Node和NPM

什么是NPM？

• NPM的全称是Node Package Manager
• 是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
• 后续我们会经常使用NPM来安装一些开发过程中依赖包.

Webpack

Vue.js官方脚手架工具就使用了webpack模板

全局安装

npm install webpack -g

初始化

安装脚手架

npm install -g @vue/cli

注意：上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的。

但是可以安装一个桥接工具，这样就可以即用脚手架2（CLI2）也可以使用脚手架3（CLI3）
npm install @vue/cli-init -g

Vue CLI2初始化项目

vue init webpack [项目名称]

Vue CLI3初始化项目

vue create [项目名称]

Vue CLI2详情

初始化项目过程

.gitconfig

可以更改git 的信息 （作者的信息）

修改初始化项目的属性-ESint

在config文件夹下=>找到index文件=>找到useEslint属性 进行修改

目录结构

Runtime-Compiler和Runtime-only的区别

在初始化项目的过程中会遇到下面的选项

那它们有什么区别呢？

https://blog.csdn.net/liusixsixsix/article/details/108236185 重点

简单结论：

• 如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler
• 如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only

vue 运行过程图

render函数的作用

创建的组件

使用render的方法

1.在render函数中创建html标签

2. 直接传入一个组件
   

npm run build 的运行过程

npm run dev 的运行过程

修改配置：webpack.base.conf.js起别名

Vue CLI3详情

区别

vue-cli 3 与 2 版本有很大区别

vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3

vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录

vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化

移除了static文件夹，新增了public文件夹，并且index.html移动到public中

项目初始化过程

现在vue3出来了 在第三个选项会让你选择 vue.js 的版本 后面的不变

目录结构详解

配置文件和修改

ui 方面的配置

• 使用命令启动配置服务器

vue ui

直接修改配置文件

文件路径 node_modules > @vue > cli-service > webpack.config.js

自定义配置：起别名

ES6补充：箭头函数

https://blog.csdn.net/qq_32614411/article/details/80897256

箭头函数的this指向最近作用域