更新時(shí)間：20210807
vite 中臺(tái)項(xiàng)目模板
涉及依賴：vite vue-route veux sass element-plus
vite中文文檔：https://cn.vitejs.dev/guide/
element-plus：https://element-plus.gitee.io/#/zh-CN/component/quickstart
vue-route v4.x：https://next.router.vuejs.org/zh/
veux v4.x：https://next.vuex.vuejs.org/zh/index.html

1. 創(chuàng)建vite項(xiàng)目

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue

2. 拉取依賴

yarn
npm i

3. 安裝vue-router

• 查看 vue-router 版本：

yarn info vue-router versions

• 直接安裝最新版 vue-router：

yarn add vue-router@4.0.6

• 在 src 目錄下創(chuàng)建以下目錄：

- src
  |- router
  |  |- index.js
  |- views
     |- Home.vue
     |- Contact.vue

• 在 index.js 中添加如下代碼：

import { createRouter, createWebHistory } from 'vue-router'
import Home from "@/views/Home.vue";

const router = createRouter({
  /** 配置頁面切換滾動(dòng)條置頂 */
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home
    }
  ]
})

export default router

// {
//   path: '/vuex',
//   component: () => import('../views/Vuex.vue')
// }

• 在 main.js 引用：

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

const app = createApp(App)
app.use(router).mount('#app')

• 在 App.vue 展示

  <router-view />

4. 安裝vuex

• 查看vuex版本

yarn info vuex versions

• 安裝最新版vuex

yarn add vuex@4.0.2

• 配置vuex

創(chuàng)建src/store/index.js莹捡，配置vuex
import { createStore } from 'vuex'
export default createStore({
  state: {
    name: 'zhagnsan'
  }
})

• main.js 引用

import { createApp } from 'vue'
import App from './App.vue'

import store from './store/index'

const app = createApp(App)
app.use(store)
app.mount('#app')

5. 安裝element-plus

安裝
yarn add element-plus
完整引用
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

6. 安裝sass

yarn add sass -D

6. 配置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  base: '/',
  build: {
    outDir: '../target'
  },
  // 路徑別名
  resolve: {
    alias: {
      '@': path.join(__dirname, 'src')
    }
  },
  server: {
    host: '0.0.0.0',
    port: 9295,
    open: false,
    https: false,
    proxy: {}
  },
  plugins: [vue()],
  css: {
    // sass預(yù)處理
    // preprocessorOptions: {
      // scss: {
        // additionalData: `
          // @import "@/assets/scss/colorDeploy.scss";
          // @import "@/assets/scss/mixinDeploy.scss";
        // `
      // }
    // }
  }
})