一、安裝

確保你已經(jīng)安裝了 Node.js

訪問https://nodejs.org/以獲取最新版本的 Node.js，推薦安裝 LTS 版本。

安裝 18.0 或更高版本的 Node.js

查看Node版本 顯示版本號安裝成功

node -v

安裝淘寶鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org

 查看cnpm版本 顯示版本號安裝成功 

cnpm -v

打開命令行或終端

運(yùn)行以下命令來全局安裝 Vue和Vite：

cnpm install vue -g

cnpm install -g create-vite

安裝成功后使用 npm list vue來檢查vue版本號 

創(chuàng)建一個新項目

在命令行中運(yùn)行以下命令，將 "my-vue3-vite-project" 替換為你想要的項目名稱：

create-vite my-vue3-vite-project --template vue

切換到項目目錄

cd my-vue3-vite-project

安裝項目依賴

cnpm install

運(yùn)行開發(fā)服務(wù)器

npm run dev

現(xiàn)在，已經(jīng)成功創(chuàng)建了一個 Vue 3 和 Vite 的項目。瀏覽器會自動打開

二、配置

為了按照企業(yè)級項目的標(biāo)準(zhǔn)配置 Vue 3 和 Vite 項目

我們需要考慮以下幾個方面：

1. 目錄結(jié)構(gòu)
2. 代碼規(guī)范和風(fēng)格
3. 環(huán)境變量和配置
4. API 請求封裝
5. 路由和權(quán)限管理
6. 組件和樣式庫
7. 優(yōu)化和打包

以下是針對這些方面的一些建議和配置

1.目錄結(jié)構(gòu)

my-vue3-vite-project
├─ public
└─ src
   ├─ api
   ├─ assets
   │  ├─ images
   │  └─ styles
   ├─ components
   ├─ layout
   ├─ router
   ├─ store
   │  ├─ modules
   │  └─ index.js
   ├─ utils
   ├─ views
   └─ main.js

2.代碼規(guī)范和風(fēng)格

為了確保團(tuán)隊中的每個成員都能遵循相同的代碼規(guī)范和風(fēng)格，推薦使用 ESLint 和 Prettier。

首先安裝所需依賴：

cnpm install --save-dev eslint eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier prettier

在項目根目錄創(chuàng)建 ".eslintrc.js" 和 ".prettierrc" 文件，分別配置 ESLint 和 Prettier。

.eslintrc.js：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/prettier",
  ],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

.prettierrc： 

{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "none",
  "arrowParens": "avoid"
}

3.環(huán)境變量和配置

在項目根目錄創(chuàng)建 ".env"、".env.development" 和 ".env.production" 文件，分別配置通用、開發(fā)和生產(chǎn)環(huán)境的變量。Vite 會自動加載這些環(huán)境變量。

.env.development 文件示例：

VITE_API_BASE_URL=http://localhost:3000/api

.env.production 文件示例：

VITE_API_BASE_URL=https://api.example.com

4.API 請求封裝

在 "src/api" 目錄中創(chuàng)建一個 API 請求庫，例如使用 Axios。

首先安裝 Axios：

cnpm install axios

然后在 "src/api" 目錄下創(chuàng)建一個封裝 Axios 的文件，如 "request.js

5.路由和權(quán)限管理

1. 安裝Vue Router

cnpm install vue-router@next

2. 配置Vue Router

在src目錄下創(chuàng)建一個名為router的新文件夾，并在其中創(chuàng)建一個index.js文件。

在index.js中，您可以添加如下代碼來配置Vue Router：

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
];

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

export default router;

3. 創(chuàng)建頁面組件

在src/views目錄下，創(chuàng)建文件 Home.vue： 

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the Home Page!</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

4. 在主應(yīng)用文件中使用Vue Router

在src/main.js文件中，您需要導(dǎo)入并使用上面創(chuàng)建的路由器：

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

const app = createApp(App);

app.use(router);

app.mount('#app');

5.修改App.vue

以使用<router-view>

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style>
/* 在這里添加樣式 */
</style>

在 "src/router" 目錄中創(chuàng)建一個權(quán)限管理文件，如 "permission.js"，用于處理路由守衛(wèi)和用戶權(quán)限。導(dǎo)入該文件到 "src/main.js" 中 

6. VueX安裝和配置

6.1.安裝Vuex

在您的項目目錄下，使用以下命令來安裝Vuex：

cnpm install vuex@next

6.2. 配置Vuex

在src目錄下創(chuàng)建一個名為store的新文件夾，并在其中創(chuàng)建一個index.js文件。

在index.js中，您可以添加如下代碼來配置基礎(chǔ)的Vuex store：

import { createStore } from 'vuex';

export default createStore({
  state: {
    // 在這里定義您的狀態(tài)
  },
  mutations: {
    // 在這里定義您的變更函數(shù)
  },
  actions: {
    // 在這里定義您的操作
  },
  modules: {
    // 在這里定義您的子模塊
  }
});

6.3. 在主應(yīng)用文件中使用Vuex

在src目錄下的main.js文件中，您需要導(dǎo)入并使用上面創(chuàng)建的Vuex store：

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

const app = createApp(App);

app.use(router);
app.use(store);

app.mount('#app');

7.組件和樣式庫

選擇一個合適的組件庫，如 Element Plus、Ant Design Vue 或 Vuetify。

按照官方文檔安裝和配置該組件庫。同時，考慮將常用的自定義組件放在 "src/components" 目錄中。

8.優(yōu)化和打包

Vite 提供了很好的默認(rèn)優(yōu)化和打包配置。如有需要，可以在 "vite.config.js" 文件中進(jìn)行自定義配置。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論