前言
接触vue框架也有一段时间，整理下之前做过的一个小demo，主要是使用vue全家桶技术，界面目前还没有，为了了解这个搭建过程，数据接口还未提供。整个过程从搭建脚手架到最后项目打包上线，是一个完整的开发流程，中间涉及到的知识点比较多，也比较零碎，通过这个项目对我自己的知识体系做一个梳理和总结。
项目技术栈
- 相关框架：vue-router、axios、vuex
- 脚手工具：Vite
- 使用语言：ES6
- UI框架：Element Plus
项目运行
# 克隆到本地
git clone http://git.hzwgkj.com/learning/vue-vite-web.git
# 安装依赖
yarn
# 开启本地服务器
yarn dev
# 发布环境
yarn build
项目开发
1.安装相关脚手架工具
（1）全局安装Nodejs
进入网页https://nodejs.org/下载nodejs，傻瓜式安装
https://nodejs.org/
（2）全局安装yarn
npm install yarn -g
（3）查看安装结果
我的电脑已经安装过了，依次执行命令：
node -v
yarn -v
出现相应的版本号，则说明安装成功
C:\Users\Administrator>node -v
v14.15.4
C:\Users\Administrator>yarn -v
1.22.10
2.用Vite来构建项目
（1）创建项目
yarn create @vitejs/app （项目名字）
（2）依次选择如下选项
vue => vue-ts (这个步骤依据个人开发习惯，习惯ts可以使用ts，喜好js，那选择vue)
你看到如下提示后就代表创建成功
Scaffolding project in E:\公司相关\学习项目\前端项目\VUE\vue-vite-web...
Done. Now run:
cd vue-vite-web
yarn
yarn dev
Done in 298.14s.
注意：之后所有操作将在vue-vite-web进行
3.提交代码
将刚刚创建的代码提交到远程仓库
（1）初始化本地仓库
git init
（2）添加GIT地址
git remote add origin xxx.git
（3）提交到本地仓库
#若是项目在idea中，请将.idea设置成忽略文件
git add .
git commit -m "chore:初始化项目"
（4）推送到远程仓库
git push -u origin master
4.整理目录/文件
（1）删除文件
README.md
（2）创建文件夹
#配置配置的目录
src/config
#存放环境配置的目录
src/config/env
#存放路由目录
src/config/router
#存放请求目录
src/config/request
#存放缓存目录
src/config/storage
#存放接口的地方
src/config/api
#存放图片的目录
assets/images
#存放公共样式的目录
assets/style
#存放view的目录 有些公司会叫pages
src/views
注意：这边个人习惯喜欢对项目结构进行分类，有好多公司是直接撒在src目录下。
5.安装插件（依赖）
（1）安装axios
用于网络的请求，获取服务端的数据
yarn add axios
（2）安装element-plus
使用这边的控件和样式
yarn add element-plus
（3）安装vue-router
实现路由的跳转
yarn add vue-router
（4）安装vuex
用于状态管理
yarn add vuex
（6）安装sass
css支持sass的写法 注意只要安装到开发环境就好
yarn add sass -D
6.整理代码
（1）新建app.scss
在 assets/style 下建立 app.scss 用于存放全局样式
（2）新建router/index.ts
在 src/config/router 下建立 index.ts 用于存放路由信息
/** 路由配置类 */
import { createRouter, createWebHashHistory } from "vue-router";
const routes=[]
/** 创建路由 */
const router=createRouter({history:createWebHashHistory(),routes});
/** 导出 */
export default router;
（3）修改App.vue
<template>
<router-view></router-view>
</template>
<script>
export default {name:'app'}
</script>
<style lang="scss">
@import "./assets/style/app.scss";
</style>
（4）修改main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
import router from "./config/router/index";
const app = createApp(App);
/** 加载 element-ui */
app.use(ElementPlus);
/** 使用路由 */
app.use(router);
/** 挂载全局app */
app.mount('#app')
（5）设置项目别名"@"
打开vite.config.ts文件
#加入path变量
const path = require('path')
#增加defineConfig配置
/*** 设置相关属性 如 别名（alias）*/
resolve: {
alias:{'@': path.resolve( __dirname, './src' ) }
}
注意：到这一步其实整个项目就能通过路由的方式运行了
