Vue框架

1、安装

1.1 node.js

版本：v16.14.2

去官网:下载 | Node.js

1.2 vue-cli

版本：@vue/cli 5.0.4

详细的操作见官方文档 Vue CLI

在控制台终端输入命令：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2、创建Vue项目

在想要创建项目的目录下，运行命令：

vue create myproject

之后会让我们选择项目中需要使用的组件,可以为系统默认值，也可以自己手动选择所需组件。如下图所示：

选择最后一个Manually select features，如果选择了Default，那么其中默认安装的eslint将会在后续的项目开发中以严格的要求进行配置，这样会导致后续的工作增加负担，出现错误的频率增高。

babel：将ES6的语法转成浏览器可以执行的低版本js语法
Router：（必须）路由
Vuex： 可选

这里我选择的是Vue2版本，因为Vue3版本刚发布不久，现在用的人比较少，而且Vue3与Vue2之间的使用还是有很大的差异。

 

 选择y

 

选择 In package.json

 这一步是问你是否想要保存你现在手动选择的组件并且在之后创建的时候能够直接使用这个选择而不需要重新进行选择，这里由于我选择了no。

最后如上图所示，该项目已经创建成功了。

3、运行Vue项目

在创建好的Vue项目的目录下,输入命令：

npm run serve

 将会把Vue项目运行起来

运行成功后，会在终端上显示网址，第一个网址 ：http://localhost:8081/为本地的访问网址，第二个网址：http://172.23.33.135:8081/为外网访问网址。

在浏览器中输入这个网址，就会出来Vue初始化界面，说明Vue框架已经成功搭建。