Vue3寫一個後臺管理系統（2）創建項目

使用 vue-cli 創建一個Vue3項目

• 首先你看下你電腦上vue-cli腳手架的版本

vue -V
------
@vue/cli 4.5.15 // 版本號

vue-cli版本保證在4.5.13及其以上就行，
如果你需要升級版本，那麼可以通過以下指令進行升級：

npm update -g @vue/cli

• 創建項目
  // 利用 vue-cli 創建項目

vue create admin-vue3

之後根據自己的需求一直下一步就行了

@vue/cli 在幫助我們創建項目的同時，也生成了很多無用的代碼，那麼這一小節我們需要去除掉這些無用的代碼。

具體如下所示：

1. App.vue 初始化代碼如下：

<template>
  <router-view />
</template>

<style lang="scss"></style>

2. 刪除 views 文件夾下的所有 .vue 文件

3. 刪除 components 文件夾下的所有 .vue 文件

4. router/index.js 中初始化代碼如下：

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

const routes = []

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

export default router

接下來，我們可以通過以下兩個指令來運行你的項目：

cd 項目目錄
npm run serve

執行成功之後，項目即可運行！

5. 瀏覽器中訪問你的應用，得到如下頁面即可：

   
   

UI組件庫我們使用Element-plus

• 安裝Element-plus

 npm install element-plus --save

element-plus 官方文檔：https://doc-archive.element-plus.org/#/zh-CN/component/installation

這一節，我們創建了一個全新的Vue3項目，刪除了無用的代碼，引入了UI組件庫Element-plus，下一節，我們開始搭建登錄頁面，一起加油吧！