vue开发前的准备

Vue3中文官网——v3.cn.vuejs.org

Vue是前端优秀框架，是一套用于构建用户界面的渐进式框架。

首先请确保你安装了最新版本的 Node.js，再继续以下步骤！！！

一、安装Vue工具 Vue CLI

Vue CLI

1.Win + R，输入cmd，回车

2.输入命令行npm install -g @vue/cli

在全局安装vue cli工具

npm install -g @vue/cli

安装之后，你就可以在命令行中访问Vue命令。你可以通过简单运行Vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

vue --version

二、创建一个项目

3.在VSCode中选择一个开发目录，打开终端

4.输入命令：vue create vue-demo，回车

vue create vue-demo

vue-demo：为项目名称，可修改，但是不能大写！！！

运动成功后，会显示以下信息

温馨提示

a.在控制台中，可以用上下按键调整选择项

b.在控制台中，可以用空格（spacebar）选择是否选中和取消选中

可以选择默认项目模板

1. Default ([Vue 3] babel,eslint)

1. Default ([Vue 2] babel,eslint)

或者选“手动选择特性”(Manully select features)来选取需要的特性。

5.我们一般选择“手动选择特性”

按下键（↓），选中Manully select features，回车

会显示以下信息，

温馨提示

在学习期间，不要选中Linter/Formatter，以避免不必要的错误提示

按空格键可以取消被默认选中的Linter/Formatter

6.我们选择Babel和Progressive Web App(PWA) Support两个选项即可，回车

显示以下信息，

Vue目前有两个主流大版本vue2和vue3，

7.可以根据自己的需求选择，回车

配置放在哪里？

In dedicated config files专用配置文件

In package.json在package.json文件

8.我们默认选择第一个In dedicated config files，回车

显示以下信息

将其保存为未来项目的预置？y代表保存，并添加名字，n不保存

可根据自己的需求输入y或者n,我们一般写n

9.在末尾输入n，回车

项目创建成功

三、运行项目

10.进入项目根目录，在终端继续输入命令行cd vue-demo，回车

cd vue-demo

11.运行项目

npm run serve

或者

yarn serve

直接访问Local后面的网址，显示以下信息，说明整个项目启动成功了！

我们以后就在src文件夹里面编写代码

四、安装Vue高亮插件

在VSCode中安装vetur或者volar都可，前者针对Vue2版本，后者针对Vue3版本

点开VSCode左侧的扩展，搜索vetur 或者 volar，点击安装即可。