Vue3.0搭建/解析

一、环境搭建

1.1、安装node环境

下载安装包

Node.js 官方网站下载：https://nodejs.org/en/

选择操作系统对应的包

按步骤傻瓜式安装好即可

win+R 输入cmd 回车 输入node -v 回车，出现版本号就代表安装成功

二：安装镜像

NPM（Node Package Manager，节点包管理器）是NodeJS的包管理器，用于节点插件的管理（包括安装，卸载和管理依赖等）。NPM是随同新版的NodeJS一起安装的包管理工具，所以安装Node后可以直接使用npm完成接下来操作

NMP安装插件是从NPM官网下载对应的插件包，该网站的服务器在国外，经常会出现下载缓慢或出现异常，这时便需要找到另外的方法提供稳定的下载，这个方法就是CNPM。阿里巴巴的淘宝团队把插件都同步到了在中国的服务器，提供给我们从这个服务器上稳定下载资源。

注意：两者都只是包管理器，可随便选择

输入：npm install -g cnpm –registry=https://registry.npm.taobao.org

输入：cnpm -v (检测是否安装成功)。

cnpm的用法和npm的用法一致，只是在执行命令的时候将npm改为cnpm。

Vue-cli项目搭建

输入 npm i @vue/cli -g 会全局安装vue-cli最新版

注意：如果安装了旧版本可通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它再重新安装，如需安装对应版本：npm install -g @vue/cli@3.0

输入：vue -V 检测是否安装成功

创建项目

打开cmd通过 cd 文件夹，到你想存项目的文件夹中

输入vue create project01（project01为项目名称）

细节操作如下：

• Defaule 是自定义配置后保存好的模板；
• default 是使用默认配置安装
• Manually select features 是自定义配置安装

选择Manually select features后

默认会帮你选择三个可以手动选择和取消配置（通过空格选择/取消）

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version // vue版本
 (*) Babel // 转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
 ( ) TypeScript // TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 Ja
 ( ) Progressive Web App (PWA) Support // 渐进式Web应用程序
 ( ) Router // vue-router（vue路由）
 ( ) Vuex // vue-router（vue路由）
 ( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
 (*) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
 ( ) Unit Testing // ***单元测试
 ( ) E2E Testing //**E2E测试,即端对端测试     

选择完后直接enter，然后会提示你选择对应功能的具体工具包，选择自己擅长或者使用广泛的，简介如下：

1. 选择Vue.JS的版本，这里选择3.x版本

2.是否使用Class风格装饰器？这里选择yes

3.是否使用Babel与TypeScript一起用于自动检测的填充？这里选择yes

4. 路由模式是否需要？这里选择yes

5.选择CSS 预处理器？这里看个人需求，我选择Sass/SCSS (with dart-sass)

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass) // 保存后编译
  Sass/SCSS (with node-sass) // 实时编译
  Less
  Stylus           

6.代码格式化检测，如果用typescript可以选择TSLint，其他看自己需求？这里选择ESLint + Prettier正常模式

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config:
> ESLint with error prevention only // typescript格式验证工具
  ESLint + Airbnb config // 只进行报错提醒
  ESLint + Standard config // 不严谨模式
  ESLint + Prettier // 正常模式
  TSLint (deprecated)  // 严格模式

7.选择语法检查方式？这里选择选择语法检查方式，这里我选择Lint on save保存就检测

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save // 保存就检测
 ( ) Lint and fix on commit  // fix和commit时候检查

8.选择单元测试？这里选择Mocha + Chai

9.e2e测试:？这里选择Cypress (Chrome only)

10.把babel,postcss,eslint这些配置文件放哪?这里选择In dedicated config files放独立文件夹

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 独立文件放置
  In package.json  // 放package.json里

11.是否保存此次配置？我选择no。键入N不记录，如果键入Y需要输入保存名字，如第一步所看到的自定义配置后保存好的模板

等待下载依赖模块
装好后通过cd进入项目的根目录，根据提示启动即可

• vue2.0默认启动文件：npm run dev
• Vue3.0+默认启动文件：npm run serve

---