Vue3.0搭建脚手架

参考文档：
https://www.cnblogs.com/similar/p/10411619.html
https://www.cnblogs.com/skylineStar/p/9599828.html
https://segmentfault.com/a/1190000022684511

一、安装node.js

1、从node官网下载并安装node，安装步骤很简单，只要一路“next”就可以了。

2、安装完成后，打开命令行工具输入命令node -v，如下图，如果出现对应的版本号，就说明安装成功了。

3、我们所需要的npm包管理器，是集成在node中的，所以，直接输入npm -v，就会如下图所示，显示出npm的版本信息（另外需要注意的是，npm的版本最好是3.x.x以上，以免对后续产生影响）。

到这里node的环境已经安装完毕了，npm包管理工具也有了，但是由于npm的有些资源被墙，为了更快更稳定，所以我们需要切换到淘宝的npm镜像——cnpm。

二、安装cnpm

1、点击进入淘宝的cnpm网站，里面有详细的配置方法。

2、或者直接在命令行输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后等待安装完成。

3、输入cnpm -v，可以查看当前cnpm的版本，这个和npm的版本还是不一样的。

4、使用cnpm的方法就是，需要用到npm的地方直接使用cnpm替换就可以了。

三、安装vue-cli脚手架构建工具

vue-cli 提供了一个官方命令行工具，可用于快速搭建大型单页面应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目

1、全局安装 vue-cli

# 全局安装 vue-cli
$ cnpm install -g @vue/cli

2、安装完成

3、然后在电脑端 C:\Users\Administrator\AppData\Roaming\npm\node_modules 目录中，可以发现多了@vue文件

4、输入命令vue -V或 vue --version，可以查看当前脚手架的版本

四、创建一个基于 webpack 模板的新项目

1、要创建项目，首先我们要选定目录，然后在选定的目录中打开命令窗口（shift + 右键，打开PowerShell命令窗口），在命令行中输入如下命令：

#empty-project为自定义项目名，需要注意的是项目的名称不能大写，不然会报错
$ vue create empty-project

2、创建项目时的配置

2.1 Please pick a preset （选择预设配置）按上下箭头可以切换选项，按回车键选中

Manually select features 选择手动配置

2.2 Check the features needed for your project （为你的项目选择需要的模块。在英文输入法状态下，按 ‘空格键’ 切换当前箭头所指选项的选中状态，按 a 键全选，按 i 键反选，中文输入法状态下 a 键和 i 键是输入，不能选择，按上下箭头切换选项）

看一下这几个选项都是做什么的吧

Choose Vue version：选择Vue版本（Vue2.x或Vue3.x） => 选中该项

Babel：babel是一种用途很多的javascript编译器，简言之可以让我们在当前的项目中随意的使用javascript最新的es6，甚至es7的语法。 => 选中该项

TypeScript：TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 => 暂时不选

Progressive Web App (PWA) Support：渐进式Web应用程序（PWA）支持。 => 暂时不选

Router：vue路由管理器。 => 选中该项

Vuex：vue状态管理。 => 选中该项

CSS Pre-processors：css预处理器。 => 选中该项

Linter / Formatter：格式化规则。 => 选中该项

Unit Testing：单元测试。 => 暂时不选

E2E Testing：用户界面测试。 => 暂时不选

最后选中的结果

按下回车键后，会询问更细节的配置

1. Choose a version of Vue.js that you want to start the project with： 选择Vue3.x版本
   

2. Use history mode for router? (Requires proper server setup for index fallback in production)（Y/n）：路由是否使用history模式？ =>n，使用hash模式

3. Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default) (Use arrow keys)： 使用上下箭头选择CSS预处理类型 =>选择less语法

4. Pick a linter / formatter config: (Use arrow keys)：使用上下箭头选择Linter/Formatter规范类型 =>ESLint + Standard config模式（正常模式）

5. Pick additional lint features：选择lint检测方式，保存时检测/提交时检测： =>Lint on save（保存时检测）

6. Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 选择 Babel, PostCSS, ESLint 等自定义配置的存放位置 => In dedicated config files（存放在专用配置文件中）

7. Save this as a preset for future projects? 是否保存当前配置，如果选Y会要求输入配置名字 =>这里可以自由选择

3、项目创建完成

4、运行项目

 $ cd empty-project3.0	// 进入项目所在目录
 $ yarn serve	// 运行项目

5、在浏览器中打开项目