2021年vite-vue3项目实践(中) 接上

Mock插件应用

1. 插件的安装

npm i vite-plugin-mock -D 或 yarn add vite-plugin-mocke -D
// 运行时依赖
yarn add mockjs

2. mockjs的配置
   1. vite.config.js中的配置 js // 引入plugin-mock import { viteMockServe } from 'vite-plugin-mock'; // defineConfig配置中plugins添加viteMockServe export default defineConfig({ plugins: [vue(), vueJsx(), viteMockServe({ supportTs: false // 对typescript的支持的开关, 这个是重点, 要不然mockjs使用不了 })] }) 2. 项目的根目录下创建mock目录, 并写上mock接口 js export default [ { url: '/api/getUsers', method: 'get', response: () => { return { code: 0, message: 'ok', data: ['Tony', 'Aric'] } } } ] 3. 在package.json中的"scripts"设置环境变量为development json // 如没安装cross-env需要安装一下cross-env "scripts": { "dev": "cross-env NODE_ENV=development vite", } 4. 在组件中调用 vue <script setup> // 请求mock api fetch('/api/getUsers').then(res => { console.log('response: ', res); }) </script>

vue-router4与vuex4的整合

1. 安装vue-router与vuex4

yarn add vue-router@next vuex@next 或 npm i vue-router@next vuex@next --save

2. 创建vue-router文件夹与文件,在src下面创建router目录, 在router目录下面创建index.js文件

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';

// 工厂函数创建router实例
const router = createRouter({
  history: createWebHashHistory(),          // hash模式， h5模式createWebHistory
  // history: createWebHistory(),
  routes: [
    { path: '/', component: () => import('views/Home.vue') }
  ]
})

export default router;

3. 创建vuex文件夹与文件，在src下面新建store目录，在store目录中创建index.js文件

import { createStore } from 'vuex';

export default createStore({
  state: {
    counter: 0
  },
  mutations: {
    increment(state) {
      state.counter++;
    }
  },
  actions: {}
})

4. 在main.js中引用vue-router, vuex

import { createApp } from 'vue'
import App from './App.vue'
import router from './router';
import store from './store';

createApp(App)
.use(router)
.use(store)
.mount('#app')

5. 在组件使用

$store.state.counter;
$store.commit('increment');

样式的处理

1. 安装对应css的依赖包，我们这里以sass为例

yarn add sass -D

2. 在src下面创建styles目录，在styles目录下创建对应的样式文件。
3. 在组件中引入样式

import 'styles/index.scss';

引入Element3

1. 安装element3, yarn add element3
2. 全局引入element3, 需引入element3级对应的样式

// 全局引入
import element3 from 'element3';
import 'element3/lib/theme-chalk/index.css';


createApp(App)
.use(router)
.use(store)
.use(element3)
.mount('#app')

2. 按需引入element3

import { ElButton } from 'element3';
import 'element3/lib/theme-chalk/button.css';

createApp(App)
.use(router)
.use(store)
.use(ElButton)
.mount('#app')

2. 使用插件方法按需引入，先在src下创建plugins目录，再在plugins目录下创建element3.js，还需在main.js引用

// src/plugins/element3.js
import { ElButton, ElInput } from 'element3';
import 'element3/lib/theme-chalk/button.css';
import 'element3/lib/theme-chalk/input.css';

export default function(app) {
  app.use(ElButton).use(ElInput);
}

// main.js
// 插件方法引入
import element3 from 'plugins/element3';

createApp(App)
.use(router)
.use(store)
.use(element3)
.mount('#app')

项目地址
未完待续...