# Vue3_ Vite_Project_Template

**Repository Path**: xqchen/Vue3_Vite_Project_Template

## Basic Information

- **Project Name**: Vue3_ Vite_Project_Template
- **Description**: 一个vue3全家桶、vite构建工具、mock.js、axios、element-plus、前端项目模板。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-05-07
- **Last Updated**: 2024-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Vite Project Template

#### **框架**

- vue 3
- vuex
- vue-router
- vue-i18n



#### UI **组件库**

- element-plus



#### **第三方库**

- lodash
- less
- sass
- js-cookie
- terser
- mock.js
- vite-plugin-mock
- vite-plugin-compression
- vite-plugin-vue-setup-extend
- postcss-px-to-viewport



#### 初始化

**拉取模板**

```bash
git clone https://gitee.com/yxsw/Vue3_Vite_Project_Template.git
```

**安装依赖**

```bash
npm install
```

**运行项目**

```bash
npm statr
```

**构建项目**

```bash
npm run build
```



#### **vite** 配置

**项目配置**



##### postcss-px-to-viewport

```js
import pxtovw from 'postcss-px-to-viewport'

const loder_pxtovw = pxtovw({
  // 这里是设计稿宽度 自己修改
  viewportWidth: 1920,
  viewportUnit: 'vw',
})

export default defineConfig({
    css: {
        postcss: {
            plugins: [loder_pxtovw],
        },
    },
})
```



##### terser

```js
 build: {
    // 生产环境时移除console.log()
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
  },
```

**viteMockServe**

```js
viteMockServe({
    mockPath: "./mock", // 解析，路径可根据实际变动
    localEnabled: false, // 开发环境
    prodEnabled: true, // 生产环境设为true，也可以根据官方文档格式
    injectCode: 
    ` import { setupProdMockServer } from './src/mock';
    setupProdMockServer(); `,
    watchFiles: true, // 监听文件内容变更
    injectFile: resolve("src/main.ts"), 
    // 在main.ts注册后需要在此处注入，否则可能报找不到setupProdMockServer的错误
})
```

**报错**  "vite-plugin-mock": "^3.0.0",

```bash
postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
file:///F:/workspace/mine-workspace/Vue3_Vite_Project_Template/node_modules/vite-plugin-mock/dist/index.mjs:128  if (!require.cache) {
  ^

ReferenceError: require is not defined
    at cleanRequireCache (file:///F:/workspace/mine-workspace/Vue3_Vite_Project_Template/node_modules/vite-plugin-mock/dist/index.mjs:128:3)
    at getMockConfig (file:///F:/workspace/mine-workspace/Vue3_Vite_Project_Template/node_modules/vite-plugin-mock/dist/index.mjs:157:3)
    at createMockServer (file:///F:/workspace/mine-workspace/Vue3_Vite_Project_Template/node_modules/vite-plugin-mock/dist/index.mjs:52:20)
    at configResolved (file:///F:/workspace/mine-workspace/Vue3_Vite_Project_Template/node_modules/vite-plugin-mock/dist/index.mjs:246:16)
    at file:///F:/workspace/mine-workspace/Vue3_Vite_Project_Template/node_modules/vite/dist/node/chunks/dep-df561101.js:65946:28
    at Array.map (<anonymous>)
    at resolveConfig (file:///F:/workspace/mine-workspace/Vue3_Vite_Project_Template/node_modules/vite/dist/node/chunks/dep-df561101.js:65946:14)
    at async _createServer (file:///F:/workspace/mine-workspace/Vue3_Vite_Project_Template/node_modules/vite/dist/node/chunks/dep-df561101.js:64959:20)
    at async CAC.<anonymous> (file:///F:/workspace/mine-workspace/Vue3_Vite_Project_Template/node_modules/vite/dist/node/cli.js:743:24)
```

**解决方法**

在node_modules/vite-plugin-mock/dist/index.mjs这个文件中做如下配置：

```js
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
```

**打包配置** **viteCompression**

- filter：过滤器，对哪些类型的文件进行压缩，默认为 ‘/.(js|mjs|json|css|html)$/i’
- verbose: true：是否在控制台输出压缩结果，默认为 true
- threshold：启用压缩的文件大小限制，单位是字节，默认为 0
- disable: false：是否禁用压缩，默认为 false
- deleteOriginFile：压缩后是否删除原文件，默认为 false
- algorithm：采用的压缩算法，默认是 gzip
- ext：生成的压缩包后缀



**server** **开发配置**

```js
  server: {
    port: 1212,
    open: false,
    host: '0.0.0.0',
    // https: {
    //   // 主要是下面两行的配置文件，不要忘记引入 fs 和 path 两个对象
    //   cert: fs.readFileSync(path.join(__dirname, './cert.crt')),
    //   key: fs.readFileSync(path.join(__dirname, './cert.key')),
    // },
    proxy: {
      '/api': {
        secure: false,
        changeOrigin: true,
        target: 'https://192.168.0.102',
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
```



#### Docker

**创建镜像**

```bash
docker image build . -t vue3_temp
```

**运行容器**

-- name 容器取别名

-d 后台运行

80:80 将容器80端口映射到主机80端口 *主机端口:容器端口*

```bash
docker run --name vue3temp -d -p 80:80 vue3_temp
```



### element-plus

##### 主题配置

```scss
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #e9542c,
    ),
  )
);

@use "element-plus/theme-chalk/src/index.scss" as *;
```



### vuex

##### vuex-persistedstate

```js
import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

const store = createStore({
  state() {
    return {}
  },
  getters: {},
  mutations: {},
  actions: {},
  plugins: [createPersistedState()],
})

export default store
```



### nprogress 进度条插件

```JS
// 引入进度条插件
import 'nprogress/nprogress.css'
import NProgress from 'nprogress' 
import { createRouter, createWebHistory } from 'vue-router'

import routes from './routes'

const router = createRouter({
  routes,
  history: createWebHistory(),
})

NProgress.configure({
  showSpinner: false,
})

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})

export default router

```