vue3项目搭建与环境配置

Node环境安装

官方文档：

http://nodejs.cn/

安装版本必须大于12.0，建议直接安装最新稳定版本（低版本项目运行报错内存泄漏）

全局安装vue脚手架

安装方式：

npm install @vue/cli -g

# or

cnpm install @vue/cli -g

# or

yarn global add @vue/cli

install 可以简写为i , cnpm i @vue/cli -g

官方文档：

https://cli.vuejs.org/zh/guide/

如果你安装的是旧版本的vue-cli，需要提前卸载，npm uninstall vue-cli -g 或 yarn global remove vue-cli，然后从新安装 @vue/cli

版本查看：

vue --version 目前4.x以上版本支持创建Vue3项目

版本升级：

npm update -g @vue/cli

# 或者

yarn global upgrade --latest @vue/cli

创建项目：

vue create manager-fe

通过vite创建项目

官方文档：

https://cn.vitejs.dev/

创建项目：

npm init @vitejs/app# orcnpm init @vitejs/app# oryarn create @vitejs/app manager-fe

安装项目所需插件

# 安装项目生产依赖

yarn add vue-router@next vuex@next element-plus axios -S

# 安装项目开发依赖

yarn add sass -D

element-plus文档：https://element-plus.org/#/zh-CN/component/quickstart

这里的开发工具使用VSCode安装插件

Eslint

Vetur

TypeScript

Prettier

制定目录结构如下图