Vue3框架学习总结一（详细记录Vue3框架安装、工程创建及配置整个过程）

      简明：本文详细记录个人学习Vue3前端框架安装、创建工程的总结内容，包括对安装配置过程中参数的说明、注意地方等等。

     （Vue3安装、工程创建及配置过程，个人测试已完整运行）

     （个人记录学习总结内容，若出现错误/改进地方，请指出/分享，共同学习进步！！！）

一、Vue3配置环境及安装

基础环境安装：Node.js、淘宝npm镜像

1、Node.js基础内容

Node.js：一个建立在Chrome浏览器的JavaScript运行时间上的平台，用于轻松构建快速、可扩展的网络应用，本质上是一个JavaScript的运行环境。

官方下载地址：Download | Node.js （ msi傻瓜式安装 ，安装成功后已有node 与 npm）

运行测试：（控制台输出 /  使用 node -v 与 npm -v 命令测试安装是否成功）

2、淘宝NPM镜像

NPM：是JavaScript包的管理工具，可以利用npm下载模板，复用已有的模板，npm是从国外官网上下载模板，国内访问较慢，因此使用淘宝NPM镜像来下载，与官方的镜像是同步的。

安装淘宝NPM镜像：设置镜像可以提高下载速度，此处使用淘宝NPM镜像

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

验证设置的镜像：npm  get  registry

3、 全局Vue-cli包（脚手架）

注意：Vue3时，vue-cli包已更改名为@vue/cli，因此需要变更。

第一种方式：直接升级为@vue/cli包   

npm update -g @vue/cli

第二种方式：卸载vue-cli，重新安装@vue/cli

#  卸载vue-cli包
npm uninstall -g vue-cli    
#  重新安装@vue/cli包
npm install -g @vue/cli     

验证安装的全局@vue/cli包：vue --version

二、创建Vue3工程

简明：键盘上、下键进行切换、空格键进行确定选择、Enter键确定完成

1、新建文件夹，创建工程（工程名：hello）

Vue CLI v4.5.15：表明Vue版本是3.0

Please pick a preset:（Use arrow keys）：请选择一个配置（利用键盘上下键）

Default（[Vue 2] babel，eslint）：系统默认配置，Vue2版本包含 babel、eslint

Default（Vue3）（[Vue 3] babel，eslint）：系统默认配置，Vue3版本包含 babel、eslint 

Manually select features：自己手动配置

2、手动配置，设置参数（选择手动配置 Manually select features）

Choose Vue version：选择Vue的版本（必选）

Babel：Js编译器，打包时可以将ES6代码转换成ES5（必选）

TypeScript：Js的一个超集，支持ES6标准（可不选）

Progressive Web App (PWA) Support：支持PWA渐进式网页应用程序（可不选）

Router：Vue中用来管理路由（必选）

Vuex：Vue中用来管理状态（必选）

CSS Pre-processors：CSS预处理器，若用Less、SAAS、Stylus则选（可不选）

Linter / Formatter：代码风格、格式校验（建议选）

Unit Testing：单元测试（可不选）

E2E Testing：E2E 单元测试 （可不选）

3、选择所有所需要的参数后，按Enter确定，进行选择Vue版本号

4、选择确定以下的配置

Use history mode for router?：是否为路由使用历史模式？（YES）

Pick a linter / formatter config：选择代码风格的配置（标准 Standard）

Pick additional lint features：选择附加的线的特征（Lint on save）

Where do you prefer placing config for Babel，ESLint，etc.？：选择你要将配置文件保存的位置（In dedicated config files） 

Save this as a preset for future projects?：是否为以上的配置保存到预设文件中（为以后使用 No）

5、完成工程的创建

cd hello：进入创建的hello工程

npm run serve：启动hello工程

注意：必须先进入，才能启动工程

6、进入并启动工程

7、打开测试页面（完成整个Vue工程的创建） 

三、补充（IDEA工具）

1、使用Idea工具打开所创建Vue3工程（整个项目结构）

2、进入并启动工程（IDEA控制台操作）

四、总结

         本文详细记录个人学习Vue3时在安装部分的总结笔记，包括对安装过程中一些参数和配置的说明内容等，若文中内容出现理解错误、编写瑕疵等，请指出/提出修改意见，共同学习！！！