前言
接觸vue框架也有一段時(shí)間，整理下之前做過的一個(gè)小demo，主要是使用vue全家桶技術(shù)，界面目前還沒有，為了了解這個(gè)搭建過程，數(shù)據(jù)接口還未提供。整個(gè)過程從搭建腳手架到最后項(xiàng)目打包上線，是一個(gè)完整的開發(fā)流程，中間涉及到的知識點(diǎn)比較多，也比較零碎，通過這個(gè)項(xiàng)目對我自己的知識體系做一個(gè)梳理和總結(jié)。
項(xiàng)目技術(shù)棧
- 相關(guān)框架：vue-router、axios、vuex
- 腳手工具：Vite
- 使用語言：ES6
- UI框架：Element Plus
項(xiàng)目運(yùn)行
# 克隆到本地
git clone http://git.hzwgkj.com/learning/vue-vite-web.git
# 安裝依賴
yarn
# 開啟本地服務(wù)器
yarn dev
# 發(fā)布環(huán)境
yarn build
項(xiàng)目開發(fā)
1.安裝相關(guān)腳手架工具
（1）全局安裝Nodejs
進(jìn)入網(wǎng)頁https://nodejs.org/下載nodejs，傻瓜式安裝
https://nodejs.org/
（2）全局安裝yarn
npm install yarn -g
（3）查看安裝結(jié)果
我的電腦已經(jīng)安裝過了，依次執(zhí)行命令：
node -v
yarn -v
出現(xiàn)相應(yīng)的版本號，則說明安裝成功
C:\Users\Administrator>node -v
v14.15.4
C:\Users\Administrator>yarn -v
1.22.10
2.用Vite來構(gòu)建項(xiàng)目
（1）創(chuàng)建項(xiàng)目
yarn create @vitejs/app （項(xiàng)目名字）
（2）依次選擇如下選項(xiàng)
vue => vue-ts (這個(gè)步驟依據(jù)個(gè)人開發(fā)習(xí)慣，習(xí)慣ts可以使用ts，喜好js，那選擇vue)
你看到如下提示后就代表創(chuàng)建成功
Scaffolding project in E:\公司相關(guān)\學(xué)習(xí)項(xiàng)目\前端項(xiàng)目\VUE\vue-vite-web...
Done. Now run:
cd vue-vite-web
yarn
yarn dev
Done in 298.14s.
注意：之后所有操作將在vue-vite-web進(jìn)行
3.提交代碼
將剛剛創(chuàng)建的代碼提交到遠(yuǎn)程倉庫
（1）初始化本地倉庫
git init
（2）添加GIT地址
git remote add origin xxx.git
（3）提交到本地倉庫
#若是項(xiàng)目在idea中，請將.idea設(shè)置成忽略文件
git add .
git commit -m "chore:初始化項(xiàng)目"
（4）推送到遠(yuǎn)程倉庫
git push -u origin master
4.整理目錄/文件
（1）刪除文件
README.md
（2）創(chuàng)建文件夾
#配置配置的目錄
src/config
#存放環(huán)境配置的目錄
src/config/env
#存放路由目錄
src/config/router
#存放請求目錄
src/config/request
#存放緩存目錄
src/config/storage
#存放接口的地方
src/config/api
#存放圖片的目錄
assets/images
#存放公共樣式的目錄
assets/style
#存放view的目錄 有些公司會叫pages
src/views
注意：這邊個(gè)人習(xí)慣喜歡對項(xiàng)目結(jié)構(gòu)進(jìn)行分類，有好多公司是直接撒在src目錄下。
5.安裝插件（依賴）
（1）安裝axios
用于網(wǎng)絡(luò)的請求，獲取服務(wù)端的數(shù)據(jù)
yarn add axios
（2）安裝element-plus
使用這邊的控件和樣式
yarn add element-plus
（3）安裝vue-router
實(shí)現(xiàn)路由的跳轉(zhuǎn)
yarn add vue-router
（4）安裝vuex
用于狀態(tài)管理
yarn add vuex
（6）安裝sass
css支持sass的寫法 注意只要安裝到開發(fā)環(huán)境就好
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=[]
/** 創(chuàng)建路由 */
const router=createRouter({history:createWebHashHistory(),routes});
/** 導(dǎo)出 */
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）設(shè)置項(xiàng)目別名"@"
打開vite.config.ts文件
#加入path變量
const path = require('path')
#增加defineConfig配置
/*** 設(shè)置相關(guān)屬性 如 別名（alias）*/
resolve: {
alias:{'@': path.resolve( __dirname, './src' ) }
}
注意：到這一步其實(shí)整個(gè)項(xiàng)目就能通過路由的方式運(yùn)行了
