vite + vue3 + elementPlus + scss + router4 + vuex项目模板搭建
vite + vue3 + elementPlus + scss + router4 + vuex项目模板
一、本地项目vite项目搭建
1. 项目搭建(基于模板搭建)
注意：Vite 需要 Node.js 版本 >= 12.0.0
npm init @vitejs/app
以下是上面命令的简约命令
# npm 6.x
npm init @vitejs/app my-vue-app --template vue
# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue
# yarn
yarn create @vitejs/app my-vue-app --template vue
2. vite脚手架搭建项目
npm init vite-app
3. 基于模板搭建和脚手架搭建的区别
https://blog.csdn.net/helloxiaoliang/article/details/117093912
二、关联远程仓库
1. 本地项目仓库化
git init // 本地项目git初始化
2. 关联远程仓库
git remote add origin 远程仓库地址 // 关联远程仓库地址
此时, 本地代码推送不到远程！
报错：fatal: refusing to merge unrelated histories
原因：本地仓库和远程仓库实际上是独立的两个仓库。使用git clone方式没有此问题
解决：git pull origin master --allow-unrelated-histories
三、ElementPlus 配置
1. 安装
npm install element-plus --save
2. 全局引入
/**
* main.js
*/
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
3. 按需引入
npm install -D unplugin-vue-components unplugin-auto-import
/**
* vite.config.ts
*/
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default {
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
4. 默认中文配置
// 配置Element默认中文
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const app = createApp(App)
app.use(ElementPlus, {
locale: zhCn,
})
.mount('#app')
四. scss 配置
1. sass安装
引入配置参考：https://www.talktocomputer.site/blogs/158/
npm install --save-dev sass
vite配置只需安装sass即可！
2.配置全局变量
- 创建/src/style/variables.scss 样式变量文件
- 创建/src/style/mixins.scss 混入样式文件
- 创建/src/style/common.scss 公共样式文件
// vite.config.js
export default defineConfig({
css:{
preprocessorOptions: {
scss: {
/**
* - 引用公共样式，使用vite搭建项目只安装sass即可，不需要安装node-sass,sass-loader
* - 引入 common.scss (已经包括了 variables.scss及mixins.scss)
* - 引入多个文件： `@import "xx1.scss";@import "@xx2.scss";`
*/
additionalData: `@import "./src/styles/common.scss";`
}
}
},
})
3. 样式额外配置—重置全局样式配置
3.1. 配置样式重置文件
创建/src/assets/css/reset.css
3.2. 引入样式重置文件
/src/main.js
/**
* 样式重置
*/
import '@/assets/css/reset.css'
五、router 配置
1. 依赖说明
创建项目时已配置router可以跳过本次配置
npm install vue-router@next -D
// 具体版本 npm install [email protected] -S
2. 路由配置
2.1 创建 /src/router/index.js
/**
* 路由入口文件
*/
import { createRouter, createWebHistory } from 'vue-router'
// 静态路由
const routes = [
{
path: '/',
redirect: '/workBranch'
},
{
path: '/workBranch',
name: 'workBranch',
component: () => import('$/workBranch.vue')
},
{
path: '/:pathMatch(.*)*',
name: 'notFound',
component: import('$/notFound.vue')
},
]
/**
* 模块化路由
* -
* -引入modules文件夹的路由js
*/
const routes = []
const files = require.context('./modules', false, /\.js$/)
files.keys().forEach(key => {
routes.push(...files(key).default)
})
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
2.2 main.js中配置路由文件
// 路由文件
import router from '@/router'
app.use(router)
3. 模块化路由设置
说明：模块化路由是指将不同业务模块的路由进行区分；根据实际视图布局进行总体布局设计
3.1 核心代码 /src/router/index.js
/**
* 基础路由：
* - 404
*
* meta参数说明
* - isBread: 是否显示面包屑
*/
const routes = [
{
path: '/',
redirect: '/demoModules/workBranch'
},
{
path: '/:pathMatch(.*)*',
name: 'notFound',
component: import('$/notFound.vue')
}
]
// 引入modules文件夹的路由js
const files = import.meta.globEager('./modules/*.js')
console.log('router files:::', files)
for (const key in files) {
if (Object.prototype.hasOwnProperty.call(files, key)) {
routes.push(...files[key].default)
}
}
import.meta.globEager 代替 require.context 自动导入文件: https://www.jianshu.com/p/995e0670bb76
4. 路由页面布局 /src/layout/GlobalLayoutTo*.vue
说明：根据总布局走路由视图
- GlobalLayoutToBlankPage: 空白页
- GlobalLayoutToContainer: 页头、左侧导航栏、主视图区域
3. 路由拦截
4. 动态路由配置
六、vuex 配置
1. vuex安装
npm install vuex@next --save
// npm install [email protected]
2. vuex配置
- 创建 /src/store/index.js
- 创建 /src/store/modules/*.vuex.js