使用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
相关推荐
患得患失94914 小时前
【前端】【高德地图WebJs】【知识体系搭建】面要素知识点——>多边形,圆形, 矩形,图形编辑器
前端·编辑器·高德地图·amap
superior tigre15 小时前
1.linux环境配置+ssh远程连接vscode调试(问题:无法联网,无法共享粘贴板,不满足运行vscode服务器的先决条件)
linux·服务器·vscode
网硕互联的小客服21 小时前
如何解决Ubuntu下vi编辑器方向键变字母的问题?
编辑器
老黄编程1 天前
VSCode 的百度 AI编程插件
ide·vscode·ai编程
老黄编程1 天前
VSCode AI编程插件
ide·vscode·ai编程
雨声不在1 天前
使用android studio分析cpu开销
android·ide·android studio
Naiva1 天前
ESP32-C3 入门09:基于 ESP-IDF + LVGL + ST7789 的 1.54寸 WiFi 时钟(SquareLine Studio 移植)
ide·笔记·vscode
return(b,a%b);1 天前
VSCode 远程开发连接(glibc<2.28)
ide·vscode·编辑器
speop1 天前
vscode使用tmux技巧
ide·vscode·编辑器
人工干智能1 天前
建自己的Python项目仓库,使用工具:GitHub(远程仓库)、GitHub Desktop(版本控制工具)、VSCode(代码编辑器)
python·编辑器·github