項目創建

在創建項目之前我們應該在終端中輸入

node -v? 和? npm -v

只有它們都能正常查看版本號才說明我們之前是已經安裝完成的。

接下來我們在合適的目錄下輸入npm create vite@latest

它會要求你輸入項目的名稱，這個名稱和我們之前通過cil創建的命名規則一樣。完成之后會要求我們選擇合適的框架

我們這里選擇vue，然后會讓我們選擇語言，我們選擇JavaScript

完成之后我們通過 cd 目錄 進入然后輸入npm install進行依賴安裝。之后通過npm run dev運行項目。如果要結束運行就按住CTRL+c退出

路由配置

路由設置之前我們需要安裝vue-router

在項目根目錄下輸入：npm install vue-router@4

完成之后我們找到src目錄，在這個目錄下創建一個router目錄，在router目錄中創建一個index.js文件我們的路由就是寫在這個地方

在index.js文件中，我們需要提前從vue-router里面導入createRouter和createWebHistory
然后把需要創建路由的組件導入。（組件：每一個.vue文件都是一個組件）

我們需要把路由存儲到一個對象里面，多個對象存儲到數組內部：
const routerArr =[{path:"路徑（相對路徑）",component:組件}]

每一個路徑都是單獨的一個對象，如果存在一個路由包含多個子路由的時候我們就需要給這個路由所在的對象添加一個children屬性，children屬性對應的值其實就是一個新的包含多個對象的數組（嵌套）為了方便理解我們來看一個非常簡單的嵌套路由實例

const routes = [{path: "/",component: () => import("./views/Home.vue"),children: [{path: "home",component: () => import("./views/Home.vue"),}]}
]

最后我們新建一個路由
const router =[{
?history：createRouter（）,
routes,
}]

然后export default router到此為止我們的index文件就編寫完成了，后續我們只需要根據需要的路由進行相應的導入以及路由設置即可

接下來就是最后一步：在main.js里面加載路由

打開main.js文件。import router from "./router"根據相對目錄導入，我們之前在index.js里面寫了一句export default router 這個語句的作用就是讓router作為默認的導出。

然后在createApp(App).mount('#app')里加上.use(router)

有的時候他可能不是一條語句，而是被拆開了：
const app = createApp(App)
app.mount('#app')這個時候我們需要在中間加上app.use(router)即可

到這個時候路由系統就算是完成了，剩下的路由的渲染之類的就不多說了。

element ui

使用之前還是需要先下載

我們在項目根目錄下輸入：npm install element-plus --save 就可以下載安裝了

使用的方法也分為兩種：完全引入 按需導入（推薦）

完全引入

我們先來講完全引入，這個相對來說是比較簡單的

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

app.use(ElementPlus)

一共就這三句，然后我們如果想用element的樣式。我們只需要

Overview 組件總覽 | Element Plus打開這個官方網站

在對應的樣式之下找到代碼，復制，粘貼到需要用到的位置即可?

按需導入

按需導入需要在項目根目錄下輸入：npm install -D unplugin-vue-components unplugin-auto-import以支持我們的需求

然后打開vite.config.js文件，把下面代碼插入

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

完成之后就可以了。為什么我們會推薦使用按需導入的方法呢？
是因為完全引入占空間大于按需導入。?

指定端口運行vite項目

如果需要在特定的端口運行項目，我們需要找到vite.config.js文件

在里面找到export default{

server:{

? ? ? ? port:8081,

????????}

}

這樣就可以指定運行端口了

vite組件問題

當我們用vite創建一個項目的時候，如果需要用到別的組件（比如你自己寫了一個組件，想使用它）的時候我們是不能按照之前的步驟直接加載掛載的。因為vite本身是沒有支持.vue解析的

使用之前我們需要下載組件：npm install @vitejs/plugin-vue --save-dev

然后我們需要在vite.config.js文件里面導入：import vue from '@vitejs/plugin-vue'; // 引入插件

然后再export default?defineConfig{}里面找一個plugins的屬性，這個屬性對應的key值是一個數組，我們在數組內添加元素vue()就可以了

這樣我們就可以在這個里面使用vue模塊了呢~