使用vscode + vite + vue3+ element3 搭建vue3脚手架

|---------|
| 技术栈 |

开发工具:VSCode

代码管理:Git

前端框架:Vue3

构建工具:Vite

路由:vue-router

状态管理:vuex

AJAX:axios

UI库:element-ui 3

数据模拟:mockjs

css预处理:sass

|------------------------------------|
| 构建viite + vue3 + element-ui3项目 |

1、安装vite + vue3脚手架

以管理员身份打开cmd命令窗口,切换到要安装项目的文件夹

cd E:\code\web\vite.myvue3

安装 vite

复制代码
npm init vite@latest 

输入项目名称,

输入包名称,

选择Vue(如果上下键不能选择,就手动输入选项,再回车),

选择JavaScript,

创建完毕。

创建项目生成的文件:

2,运行vite + vue3项目

打开vscode,打开刚创建的E:\code\web\vite.myvue3文件夹,新建一个终端,在终端窗口中输入两条命令:

复制代码
cnpm insall           #仅第一次运行前需要安装
npm run dev

如果执行 npm run dev 命令的时候报错类似 "\node_glotal\vue_sp1,因为在此系统上禁止运行脚本" 这种错误,

解决办法:

以管理员身份打开 Windows PowerShell

输入 set-ExecutionPolicy RemoteSigned

选择Y 就可以了。

运行成功会输出如下信息:

将 Local:后面的Http地址输入到浏览器地址栏里查看效果。

在 浏览器里运行出现上面的信息,说明vue3 + vite 项目跑起来了。

|-----------------|
| 3,安装vue3依赖包 |

复制代码
cnpm install vue-router@4           #配置路由
cnpm install vuex@next -S           #配置状态管理
cnpm i axios -S                     #安装 axios
cnpm install --save-dev sass        #css预处理,可以不安装
cnpm i mockjs -D                    #安装mockjs,用于摸拟后端接口调试,可以不安装

|---------------------------|
| 4,安装element-plus及icon |

复制代码
#安装Element Plus
cnpm install element-plus -S

#安装element plus icon
cnpm install @element-plus/icons -S
cnpm install @element-plus/icons-vue -S

根据需要安装其它需要用到的依赖:

复制代码
#安装 echart
cnpm install --save echarts

#安装二维码
cnpm install --save qrcode.vue

#安装 tinymce文本编辑器
cnpm install tinymce -S
cnpm install @tinymce/tinymce-vue -S

#安装 html2canvas
cnpm install --save html2canvas

|-----------------------|
| 5,main.js文件配置vant |

复制代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
//import TEditor from './components/TEditor.vue'

const app = createApp(App);
//app.component('TEditor',TEditor);
app.use(store).use(router).use(ElementPlus, { size: 'small', locale: zhCn}).mount('#app');

|----------------|
| 6,打包vue3项目 |

复制代码
npm run build
相关推荐
罗政7 小时前
冒险岛079 V8 整合版源码搭建教程+IDEA启动
java·ide·intellij-idea
艾斯比的日常9 小时前
VSCode 实用快捷键
ide·vscode·编辑器
Galaxy_12299 小时前
vscode远程报错:Remote host key has changed,...
ide·vscode·编辑器
彬sir哥9 小时前
VScode运行后出现黑窗口
vscode·运行·黑窗口
Hi~晴天大圣14 小时前
Pycharm中断点使用技巧
ide·python·pycharm
且随疾风前行.15 小时前
Android Studio 提示 !Failed to initialize editor
android·ide·android studio
比牛顿更懂PID16 小时前
VSCode本地python包“无法解析导入”
ide·vscode·python
qxyywy18 小时前
CUDA 安装 一直卡在Installing Nsight Visual Studio Edition
ide·visual studio·cuda
前端郭德纲19 小时前
vscode默认终端怎么设置成git bash
git·vscode·bash
瞌睡不来20 小时前
(学习总结25)Linux工具:vim 编辑器 和 gcc/g++ 编译器
linux·学习·编辑器·vim·编译器·gcc/g++