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 <project-name>

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 vue-router@4.0.12 -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 vuex@4.0.2

2. vuex配置

• 创建 /src/store/index.js
• 创建 /src/store/modules/*.vuex.js

3. vuex使用

这篇好文章是转载于：学新通技术网