日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

提示：為了大家CTRL + C方便，我文章中的所有代碼全部為純文本。如果你是前端童鞋，我還是建議你真正理解后，自己手動完成，而不是CTRL + C。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、成都小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了松原免費建站歡迎大家使用！

不廢話，直入正題。我用的Windows系統(tǒng)，其它系統(tǒng)類似。首先，我們根據(jù)vite官網(wǎng)教程，在cmd窗口運行以下命令，創(chuàng)建一個vite + Vue3的基礎(chǔ)項目。

>>> yarn create vite my-vue-app --template vue

項目創(chuàng)建完成后，運行以下命令安裝依賴。

>>> cd my-vue-app
>>> yarn

依賴安裝完成后，運行以下命令就可以啟動我們的開發(fā)服務(wù)了。

>>> yarn dev

然后打開瀏覽器，訪問http://localhost:3000，界面如下。

現(xiàn)在，我們運行以下命令，添加一些依賴。

>>> yarn add vue-router element-plus @element-plus/icons-vue

然后，運行以下命令，添加一些開發(fā)依賴。

>>> yarn add sass unplugin-element-plus -D

現(xiàn)在，我們集成vue-router。在src目錄下創(chuàng)建views目錄，在里面創(chuàng)建2個vue文件：Home.vue和Demo.vue，Home.vue文件代碼如下，Demo.vue類似。

然后，在src目錄創(chuàng)建router.js文件。代碼如下：

import { createRouter, createWebHashHistory } from 'vue-router'
export default createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/demo',
      component: () => import('./views/Demo.vue')
    }
  ]
})

然后，將src/main.js修改為如下代碼：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

現(xiàn)在，我們參照element-plus官方文檔，實現(xiàn)按需引入和自定義主題功能。首先，在src/assets目錄下創(chuàng)建theme目錄，在theme目錄添加文件default.scss，在該文件中添加如下代碼：

$--colors: (
  'primary': (
    'base': #00cdb1,
  )
);
$--text-color: (
  'primary': #303133,
  'regular': #606266,
  'secondary': #909399,
  'placeholder': #c0c4cc,
);
$--border-color: (
  'base': #dcdfe6,
  'light': #e4e7ed,
  'lighter': #ebeef5,
  'extra-light': #f2f6fc,
);
$text-color-primary: map-get($map: $--text-color, $key: primary);
$text-color-regular: map-get($map: $--text-color, $key: regular);
$text-color-secondary: map-get($map: $--text-color, $key: secondary);
$text-color-placeholder: map-get($map: $--text-color, $key: placeholder);
$border-color-base: map-get($map: $--border-color, $key: base);
$border-color-light: map-get($map: $--border-color, $key: light);
$border-color-lighter: map-get($map: $--border-color, $key: lighter);
$border-color-extra-light: map-get($map: $--border-color, $key: extra-light);
$aside-color: #33425b;
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: $--colors,
  $text-color: $--text-color,
  $border-color: $--border-color,
);

然后，我們修改vite.config.js文件，替換為如下代碼：

import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ElementPlus from 'unplugin-element-plus/vite'
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`
    }
  },
  css: {
    preprocessorOptions: {
      scss: { // 注入全局scss變量
        additionalData: `@use "~/assets/theme/default.scss" as *;`
      }
    }
  },
  plugins: [
    vue(),
    ElementPlus({ useSource: true })
  ]
})

現(xiàn)在，我們在src目錄下創(chuàng)建plugins目錄，在plugins目錄下創(chuàng)建element-components.js和index.js文件。element-components.js文件代碼如下，該文件用于按需導(dǎo)出全局組件，我們會在index.js文件中引入，并導(dǎo)出一個注冊插件函數(shù)，在該函數(shù)中注冊。

export {
  ElButton
} from 'element-plus'

index.js文件代碼如下：

import * as ElementUi from './element-components'
export default app => {
  // 單獨創(chuàng)建element-components文件的主要目的就是便于通過循環(huán)注冊組件
  Object.values(ElementUi).forEach(c => app.use(c))
}

現(xiàn)在，我們修改src/main.js文件，在該文件中引入plugins/index.js文件，并注冊插件。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import VuePlugins from './plugins' // 引入
const app = createApp(App)
app.use(VuePlugins) // 注冊插件
app.use(router)
app.mount('#app')

現(xiàn)在，我們修改Demo.vue文件，測試一下我們上面引入的ElButton組件。Demo.vue文件代碼改為如下：

確保開發(fā)服務(wù)已啟動，在瀏覽器訪問http://localhost:3000/#/demo，我們會看到如下界面，點擊測試按鈕，會彈出一個成功的消息提示。

現(xiàn)在，我們將上篇文章中實現(xiàn)的TableView組件添加到該項目中。首先我們引入用到的element-plus組件。修改element-components.js文件為如下代碼：

export {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElTable,
  ElTableColumn,
  ElLoading,
  ElPagination,
  ElConfigProvider // 用于配置語言，默認為英文，我們需要配置成中文
} from 'element-plus'

由于element-plus的默認語言是英文的，我們需要先配置中文語言包。將App.vue改為如下代碼：

然后，將上篇文章中完成的TableView.vue組件放到components目錄下，并在該目錄創(chuàng)建index.js文件，該文件代碼如下：

export { default as TableView } from './TableView.vue'

然后，修改src/plugins/index.js文件，引入我們的自定義組件，并注冊為全局組件。

import * as ElementUi from './element-components'
import * as comps from '../components'

export default app => {
  Object.values(ElementUi).forEach(c => app.use(c))
  Object.keys(comps).forEach(k => app.component(`Ui${k}`, comps[k]))
}

現(xiàn)在，我們可以寫一個例子測試下TableView.vue組件了。修改Demo.vue文件，替換為如下代碼：

然后，訪問http://localhost:3000/#/demo，我們可以看到如下界面。

以上就是本篇要講的所有內(nèi)容，童鞋們，都學(xué)會了嗎?

本文標(biāo)題：基于Vite+Vue3+Element-Plus的前后端分離基礎(chǔ)項目搭建
轉(zhuǎn)載源于：http://www.5511xx.com/article/cojhdos.html