使用Vue3搭建一个完整项目

系列文章目录

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue3项目搭建前需要做的准备需要下载node环境

去nodejs官网下载 安装包:Node.js，下载好安装直接下一步下一步就ok。安装好后再cmd中输入
node -v 后面提示了版本就说明成功了

二、配置一些环境变量

1.新建文件夹配置环境变量

更改全局下载路径
1、 一般情况下全模块所在路径和缓存路径放在node安装目录，所以在安装目录下新建【node_global】和【node_cache】文件
C:\Program Files\nodejs 一般都默认在这个目录
新增文件夹后执行以下命令：
npm config set prefix " C:\Tools\web\Nodejs\node_global" ---->仓库
npm config set cache " C:\Tools\web\Nodejs\node_cache" —>缓存

查看是否生效：
npm config ls

2.环境变量配置
2.1、在【用户变量】Path下新增
C:\Program Files\nodejs\node_global 环境变量

2.2、在系统变量下新建 NODE_PATH ,变量值：
C:\Program Files\nodejs\node_global\node_modules

2.3、在系统变量【Path】下新增 %NODE_PATH% 变量

2.4、测试是否成功:
npm install express -g -g是全局安装的意思（会下载到C:\Tools\web\Nodejs\node_global\node_modules目录），不加 -g 就是默认下载到当前目录
能正确下载到配置的目录表示node环境配置成功！

Express 4.17.2
基于 Node.js 平台，快速、开放、极简的 Web 开发框架

注意：
若执行命令npm install express -g 出现如下报错，是由于权限的原因，右击Nodejs文件夹->属性->安全，点击编辑，将所有权限都✔即可。

2.准备工作做好，开始安装vue3脚手架

1.npm config set registry +镜像源 （npm config list查看当前npm配置）
https://registry.npm.taobao.org —>淘宝镜像源
https://registry.npmjs.org -->默认镜像源
可自由切换，哪个速度快用哪个

2.npm install -g @vue/cli
2.1 查看是否下载成功 vue -V

3.vue create 项目名称

3.1 选择运行环境
（按键盘空格表示选中或者取消）
• Babel 主要是对es6语法转换成兼容的js （选上）

• TypeScript 支持使用TypeScript语法来编写代码

• Progressive Web App (PWA) Support [把网页做的更像原生app]

• Router 支持vue路由配置插件（一般都会选择）

• Vuex 支持vue程序状态管理模式 (一般都会选择)

• CSS Pre-processors 支持css预处理器 （一般都会选择）

• Linter / Formatter 支持代码风格检查和格式化 （选上）

• Unit Testing 单元测试

• E2E Testing E2E测试

4.下载好后 npm run serve 执行，项目就跑起来了