快捷導(dǎo)航

Vue3+Vite實(shí)現(xiàn)項(xiàng)目搭建步驟

更新時(shí)間：2024年07月05日 17:09:35 作者：我是ed.

這篇文章主要介紹了Vue3+Vite實(shí)現(xiàn)項(xiàng)目搭建步驟,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Vite

創(chuàng)建 Vue3 項(xiàng)目有兩種常見的方式，一種是想 vue2 版本一樣使用腳手架工具創(chuàng)建，創(chuàng)建 vue3 項(xiàng)目的腳手架必須是4版本以上的，另一種方法就是使用 vite 創(chuàng)建，為什么使用 vite 呢？因?yàn)榭?！賊快！

vite 官網(wǎng)：https://cn.vitejs.dev/

安裝 Vite

安裝 vite 構(gòu)建工具：

npm install -g create-vite-app

Vite 創(chuàng)建 vue3 項(xiàng)目

創(chuàng)建一個項(xiàng)目名稱為 vue3-wjw 的項(xiàng)目：

create-vite-app vue3-demo

項(xiàng)目創(chuàng)建完成的目錄結(jié)構(gòu)就是這個樣子的。

然后進(jìn)入文件夾，安裝依賴，啟動就可以了。然后使用 Vite 創(chuàng)建的項(xiàng)目真的厲害，秒開，不用打包直接啟動。

安裝 vue-router

安裝 vue-router 工具，首先命令安裝最新版本：

npm install vue-router@4.0.3

安裝完成，在 src 文件夾下創(chuàng)建 router 文件夾，router 文件夾下創(chuàng)建 index.js 文件。

然后在 src 文件夾下繼續(xù)創(chuàng)建 views 文件夾，views 文件夾下創(chuàng)建 About.vue 和 Home.vue 文件，然后在里面隨便寫幾個標(biāo)簽文字之類的編寫一點(diǎn)靜態(tài)頁面內(nèi)容。

后在 router 文件夾下的 index.js 文件中寫入下面代碼：

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

// 開啟歷史模式
// vue2中使用 mode: history 實(shí)現(xiàn)
const routerHistory = createWebHistory();

const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            redirect: '/home'
        },
        {
            path: '/home',
            component: () => import('../views/Home.vue')
        },
        {
            path: '/about',
            component: () => import('../views/About.vue')
        }
    ]
})

export default router

在 App.vue 中修改這一部分：

<template>
  <div class="nav-btn">
    <router-link to='/'> Home</router-link>
    <router-link to='/about'>About </router-link>
  </div>
  <router-view></router-view>
</template>

最后在全局 main.js 引入一下 router。

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

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

然后這個就可以了！

安裝 less 以及 less-loader

這個相對來說簡單一點(diǎn)兒，就是一行命令完成。

npm install less less-loader --save

但是有一點(diǎn)是需要注意的，less 和 less-loader 需要寫到 package.json 文件中的 devDependencies 里面，否則項(xiàng)目運(yùn)行會報(bào)錯。

vite.config.js 配置

因?yàn)檫@個項(xiàng)目是使用 vite 創(chuàng)建的，所以需要創(chuàng)建一個 vite.config.js 文件進(jìn)行項(xiàng)目配置，這個和 vue2 版本的 vue.config.js 文件類似，直接使用下面的代碼就可以了。

const path = require('path')

module.exports = {
  alias: {
    '/@/': path.resolve(__dirname, './src')
  },
  hostname: 'localhost', // 默認(rèn)是 localhost
  port: '8000', // 默認(rèn)是 3000 端口
  open: true, // 瀏覽器自動打開
  https: false, // 是否開啟 https
  ssr: false, // 服務(wù)端渲染
  base: './', // 生產(chǎn)環(huán)境下的公共路徑
  outDir: 'dist', // 打包構(gòu)建輸出路徑，默認(rèn) dist ，如果路徑存在，構(gòu)建之前會被刪除
  proxy: { // 本地開發(fā)環(huán)境通過代理實(shí)現(xiàn)跨域，生產(chǎn)環(huán)境使用 nginx 轉(zhuǎn)發(fā)
    '/api': {
      target: 'http://127.0.0.1:7001', // 后端服務(wù)實(shí)際地址
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
}

更多配置可以前往官網(wǎng)查看。

Element Plus 組件庫安裝

vue2 的項(xiàng)目使用的組件庫是 ElementUI，但是 vue3 項(xiàng)目使用的組件庫是 Element Plus。

安裝方法呢，也很簡單。

npm install element-plus

安裝完成，在 main.js 中引入。

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

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

然后就可以在頁面實(shí)驗(yàn)一下了！

<el-button type="primary" @click="show">Primary</el-button>

import { ElMessage } from 'element-plus'

setup() {
  function show() {
    ElMessage('王佳偉，你好棒?。?)
  }
  return { show }
}

安裝 Vuex

安裝 vuex 的話也是，只需要一句命令就可以了。

npm install vuex@4.0.0-rc.2

安裝完成開始配置！

在 src 文件夾下，創(chuàng)建 store 文件夾，在 store 文件夾下創(chuàng)建 action.js、state.js、getters.js、mutations.js、index.js 五個文件。

然后嘞，在這五個文件中寫點(diǎn)代碼。

state.js 文件

// state.js 文件
let state = {}
export default state

getters.js 文件

// getters.js 文件
let getters = {}
export default getters

mutations.js 文件

// mutations.js 文件
let mutations = {}
export default mutations

actions.js 文件

// actions.js 文件
let actions = {}
export default actions

index.js 文件

// index.js 文件
import { createStore } from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'

export default createStore({
    state,
    getters,
    mutations,
    actions
})

然后呢，還是在 main.js 文件中引入一下。

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

好了，按道理說這個地方已經(jīng)完成了，然后可以測試一下。

在 state.js 文件里面添加一條數(shù)據(jù)：

let state = {
    username: '我是ed.';
}

然后找個頁面，寫一個按鈕，點(diǎn)擊按鈕獲取這個 username，使用 elementPlus 消息彈窗提示。

下面是主要代碼：

<el-button type="primary" @click="show">Primary</el-button>

<script>
  import { ElMessage } from 'element-plus'
  import { useStore } from 'vuex'
  export default {
    setup() {
      const store = useStore()
      function show() {
        ElMessage(store.state.username)
      }
      return { show }
    }
  }
</script>

安裝 Axios

安裝 Axios 其實(shí)超級超級超級簡單，啊哈哈哈哈哈~~

一條命令完事：

npm install axios

安裝完成了之后，需要配置 Axios，首先在 src 文件夾下創(chuàng)建兩個文件夾，分別是 api 和 utils 文件夾。

在 api 文件夾下創(chuàng)建 login.js 文件，在 utils 文件夾下創(chuàng)建 request.js 文件。

request.js 文件內(nèi)容就下面代碼，沒怎么封裝，所以說呢，里面具體封裝成啥樣完全看業(yè)務(wù)需求，我沒做。

import axios from 'axios'

const service = axios.create({
  baseURL: '/',
  timeout: 9000, // 請求超時(shí)時(shí)間
})

export default service

login.js 文件下面寫個接口。

import request from '/@/utils/request'

let login = {};
systemInfo.login = function (data) {
  return request({
    url: '/ed/login',
    data,
    method: 'post'
  })
}

export default login

好了，完成了，基本就這些了。