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

发布时间 2023-06-27 10:19:21作者: 民工黑猫
技术栈

开发工具: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 项目跑起来了。