vue-cli脚手架 从零搭建 vue3 项目

目录

准备工作

正在创建

创建完成

目录结构 如下 

后续添加模块

功能编写

---

准备工作

vue-cli需3.0以上版本（已安装旧版1.x/2.x的需先卸载）

vue -V  // 查询vue-cli版本 
npm uninstall -g vue-cli  //卸载旧版vue-cli

npm install -g @vue/cli // 安装vue-cli3/cli4版本（本文选此项）
npm install -g vue-cli // 安装vue-cli2版本

其他常用命令：

vue -V  // 查询vue-cli脚手架版本 
npm list vue  // 查询vue版本 
npm -V  // 查询npm版本 
node -v  // 查询node版本
nvm ls  //查询已安装的node版本，需先安装nvm

正在创建

创建完成

进入目录

cd vue3-demo

运行项目

yarn serve 

此时，一个最基础的 vue3 项目就搭建好了

目录结构 如下 

 后续模块封装请见  如下  （此文章随时更改）

后续添加模块

element plus 组件库添加： vue3 引入 element plus 组件库_xhc6666的博客-CSDN博客

route 路由 模块添加：vue3 引入 router 模块_xhc6666的博客-CSDN博客

layout 布局添加：vue3 layout 布局 设置_xhc6666的博客-CSDN博客

config 模块添加：

api  接口 模块添加：

i18n 双语 模块添加 ： 

功能编写

基本websocket建立：简单本地websocket运行实例（vue3）_华电程序猿的博客-CSDN博客