Vue 3.0安装与使用

Node.js安装

（尽量下载Node官方左边的长期支持版本）

Vue-cli安装

搭建Vue3.0项目，必须依赖Vue-cil3.0或以上的版本。打开"命令提示符"窗口：

复制代码

node -v

确认安装的node版本

如果之前安装过Vue2.0版本，就需要把Vue2.0相关安装文件先进行卸载；否则请忽略此步骤。打开"命令提示符"窗口：

npm uninstall vue-cli -g

如果之前按没有安装过Vue2.0.直接在"命令提示符"窗口中输入一下命令

npm install -g @vue/cli

其中，参数-g表示全局安装；@vue/cli表示安装Vue-cli的最新版本。

安装完成后，可以在"命令提示符"窗口中输入以下命令来检查安装成功的版本号，如果能看到响应，则说明Vue-cli安装成功

vue -V

Vue3.0项目的创建步骤

新建一个用于存放Vue3.0项目的文件夹，此处在E盘新建一个文件夹：C:\Users\PC\Desktop\vue30example.
在"命令提示符"窗口输入以下命令，进入新创建的目录：

cd C:\Users\PC\Desktop\vue30example

在"命令提示符"窗口输入以下命令，进入Vue3.0项目的创建向导：

vue create 项目名称

按y并按Enter键。

在图中询问用户选择项目是以什么模板方式进行安装。

Default（[Vue 2] babel,eslint）：默认的预设配置，会快速创建一个Vue2.0项目，提供了babel和eslint的支持。
Default(Vue 3 preview)([Vue 3]babel,eslint):默认的预设配置，会快速创建一个Vue3.0项目，提供了babel和eslint的支持。
Manually select features:手动进行项目配置创建，可以根据项目的的需要选择合适的选项，具备更多的选择性。

在上图中，Vue-cli提供以下特性供用户选择，用户可以根据项目需要选择添加的配置项。通过上、下箭头键进行配置项切换，对需要选择的配置项使用空格键进行选中/反选。

Choose Vue version：是否进行Vue版本的选择。
Babel：使用Babel将源代码进行转码（把ES6=》ES5）
TypeScript：使用TypeScript进行源码编写。使用TypeScript可以编写强类型JavaScript，对开发有很大的好处。
Progressive Web App（PWA）Support：使用渐进式网页应用（PWA）。
Router：使用Vue路由
Vuex：使用Vuex状态管理器。
CSS Pre-processors：使用CSS预处理器，如Less、Sass等。
Linter/Formatter：使用代码风格检查和格式化。
Unit Testing：使用单元测试。
E2E Testing：使用E2E Testing，End to End（端到端）是黑盒测试的一种。

选择相应的配置项后按Enter键，打开下图界面。

在上图中，提示用户有Vue2.x和Vue3.x两种项目类型，可以通过上、下箭头键进行选择。此处选择Vue3.x并按Enter键，打开如下图所示的路由模式选择界面。

在上图中，询问是否使用history路由模式。如果启用history路由模式，则项目生成之后，有可能会出现打开的浏览器页面是空白。此处不选择history路由模式，输入字符n并按Enter键，打开下图页面。

在下图中，需要选择一种CSS预处理器。需要说明的是，CSS预处理器用一种专门的编程语言进行Web页面样式设计，然后再编译成正常的CSS文件以提供项目使用。CSS预处理器包括以下几种。

Sass/SCSS：Sass采用Ruby语言编写的一种CSS预处理语言，是最成熟的CSS预处理语言。最初是为了配合HAML（一种缩进式HTML预编译器）而设计的，因此有着和HTML一样的缩进式风格。
Less：是一门CSS预处理语言，它扩展了CSS语言，增加了如变脸、混合（mixin）、函数等功能，让CSS更易维护，方便制作主体和扩充。Less可以运行在Node或浏览器端。
Stylus：可以省略原生CSS中的大括号，逗号和分号，类似于Python语言的编程风格。由于其语法灵活，如果没有团队规范，就会开发混乱，维护起来比较麻烦，各种语法混杂。

在上图中，需要选择一种代码格式化检测工具。具体选择如下。

Eslint with eooro prevention only:ESLint只会进行错误提醒。
ESLint+Airbnb config:ESLint Airbnb标准。
ESLint+Standard config:ESLint Standard标准。
ESLint+Prettier:ESLint(代码质量检测)+Prettier(代码格式化工具)。

在此处通过上、下箭头键选择ESLint+Standard config代码格式化检测工具，然后按Enter键，打开如下图所示界面。

在上图中，选择代码检查方式。具体选项如下。

Lint on save：保存时检查。
Lint and fix on commit（requires Git）：提交时检查。

在此处通过上、下箭头键移动高亮行，再用空格键进行选中，然后按Enter键，打开下图所示界面。

在上图中，设置Babel、PostCSS、ESLint等配置文件如何存放。具体选项如下。

In dedicated config files:放到单独的配置文件中。
In package.json:放到package.json中。

为了方配置清晰好看，选择为每个配置创建单独的文件。通过上、下箭头键移动高亮行，然后按Enter键选中相关配置，打开下图所示界面。

在下图中设置是否需要保存当前配置，为以后生成新项目时进行快速构建。具体选项如下。

y:保存，后续创建新项目时可以直接使用该配置
n：不保存，需要进行重新配置。

配置完成后，开始生成Vue3.0项目，当项目等待相关依赖的安装完成后，显示下图所示界面。

在下图中，项目安装在当前目录下的firstvue30子目录中，通过"命令提示符"窗口先进入指定目录，然后输入下面的命令运行。结果如下图所示。

npm run serve

在浏览器地址栏中输入http://localhost:8080/ ,可以访问生成项目的主页，在浏览器中显示结果如下。

项目创建后的目录说明

如图所示。

说明：

node_modules目录：项目依赖包，其中包括很多基础依赖，用户也可以根据特定需要安装其他依赖。安装方法是：打开"命令提示符"窗口，进入Vue3.0的项目目录，输入下面的命令进行安装。

npm install [依赖包名称]

例如，下面是项目加载路由导航的安装命令：

复制代码

npm install vue-router

public牡蛎：公开资源目录，用户存放需要访问的图片文件和HTML文件。其中，index.html是主页文件；favicon.ico是一个图标文件。打包时会把该文件夹下的资源原封不动地复制到dist文件夹下。 3. src目录：项目的核心文件目录，包括以下内容。
App.vue：Vue3.0项目的主组件，也是页面入口文件，所有页面都是在App.vue下进行切换的，是整个项目的关键，负责构建定义及页面组件归集。
main.js：入口JavaScript文件。

（//后面的注释是我写的，不要写！不要写！不要写！，不然你看命令提示符里报错了。写了删掉。）

.browserslistrc:配置使用CSS兼容性插件的适用范围。
.eslintrc.js：配饰ESLint。
.gitignore:配置gitignore的文件或文件夹
balel.config.js:使用一些预设
package.json:项目描述及依赖。
package-lock.json:版本管理使用的文件。
README.md:项目描述。

开发工具

VScode，下载网址code.visualstudio.com/

vs Code开发前端常用插件

Auto Close Tag:自动补全HTML标签。
Auto Rename Tag:自动重命名成对的HTML标记，修改开始标签后其对应的结束标签会同步修改。
HTML CSS Support:语法提示。
HTML Snippets:HTML代码片段，该插件可提供HTML标签的代码提示，注意不需要键入尖括号。
JavaScript(ES6) code snippets:ES6语法智能提示，以及快速输入。
language-stylus:语法提示。
Path Autocomplete:自动提示文件路径，支持各种快速引入文件。
VS Color Picker:颜色自动提示。
Vue VS Code Snippets:HTMLHTML中的提示和代码不全。
Vetur:VS code官方指定的Vue插件，是Vue开发者必备。内含语法高亮、智能提示、emmet、错误提示、格式化、自动补全和debugger等使用功能。
ESLint:规范JavaScript代码书写规则，如果觉得太过严谨，可以自定义规则。
Vetur:语法高亮、智能感知等。
Debugger for Chrome:通过VS Code调试在Google Chrome中运行的JavaScript代码。
Beautify:在代码文件中右击，在弹出的快捷键中选择一键格式化JavaScript、JSON、CSS、Sass和HTML。
Bracket Pair Colorizer:该插件可以把成对的括号做颜色区分，并且提供一根连接线，方便审阅代码结构。
Code Spell Checker:拼写检查程序，检查不常见的单词，如果单词拼写错误，则会给出警告提示。

使用VS code开发Vue3.0项目

打开VS code，单击"打开文件夹"按钮或在菜单栏中依次选择"文件→打开文件夹"命令，然后选择之前创建的文件。

在菜单栏中依次选择"终端→新终端"命令，然后输入npm run serve，启动。