Vue3.0 + Vite 初體驗（一）項目配置

時間  2021-04-12
標籤 css html vue node webpack ios nginx git github web 欄目 CSS 简体版
原文   原文鏈接

Vue3.0 已經發布一段時間了，特別是還發布了一個打包構建工具 Vite，聽說是能夠幹掉 webpack 的，趁這段時間有空，本人也體驗了一下。css

想使用 Vue3.0 不必定要用 Vite，vue-cli 也能夠構建。檢查一下 CLI 版本，確保升到4以上，而後執行 vue create xxx 會出現幾個選項，選第二個就能夠建立 Vue3 項目。html

image.png

使用 CLI 構建的項目仍是使用 webpack 進行打包的，這裏就不展開了。這裏介紹下用 vite 構建。首先安裝 vite 構建工具：vue

$ npm install -g create-vite-app

建立項目：node

# 下面兩個命令均可以
$ create-vite-app vue3-demo
$ cva vue3-demo

跟 CLI 不同，vite 目前沒有提供命令行交互的選項，就是按照默認的模板進行建立的。CLI 建立項目會自動從 npm 拉取依賴，而 vite 建立項目沒有拉取依賴，所以執行命令以後很快就建立完成了。webpack

image.png

建立完成的項目結構是這樣的：ios

image.png

package.json 中能夠看到依賴很是少，只有 vite 和 @vue/compiler-sfc ，沒有 babel，由於 vite 是經過瀏覽器去解析模塊。nginx

image.png

接下來手動拉一下依賴：git

$ npm install

而後啓動項目：github

$ npm run dev

簡直就是秒開，不用打包實在快！注意 vite dev server 默認端口是3000，這邊改成了 8000 端口，後面會講怎麼改配置。web

image.png

如今的項目只能用來寫寫 HelloWorld，還不可以進行實際的開發，下面來介紹一下項目配置。

1. 引入 vue-router 4.0.3

查看 vue-router 版本：

$ npm info vue-router versions

直接安裝最新版 vue-router：

$ npm install vue-router@4.0.3

在 src 目錄下建立如下目錄：

- src
  |- router
  |  |- index.js
  |- views
     |- Home.vue
     |- Contact.vue

在 index.js 中添加以下代碼：

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

// 開啓歷史模式
// vue2中使用 mode: history 實現
const routerHistory = createWebHistory();

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

export default router

而後在 App.vue 中添加以下代碼進行測試：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div class="nav-btn">
    <router-link to='/'> Home</router-link>
    <router-link to='/contact'>Contact </router-link>
  </div>
  <router-view></router-view>
</template>

<script>
export default {

}
</script>

點擊Home和Contact，路由發生變化，同時組件切換

2. 引入 less && less-loader

執行下面的命令，等待安裝完成就能夠使用了，不用在 main.js 中引入

$ npm install less less-loader --dev

注意這裏有個坑，less 和 less-loader 須要寫到 devDependencies 裏面，下面的命令會把依賴寫到 dependencies 裏面，項目運行會報錯

# 下面兩個命令是同樣的，都是寫到 dependencies
$ npm install less less-loader
$ npm install less less-loader --save

3. 模塊配置路徑別名，瀏覽器打開和跨域

根目錄下建立 vite.config.js ，添加配置：

const path = require('path')

module.exports = {
    alias: {
        '/@/': path.resolve(__dirname, './src')
    },
    hostname: '0.0.0.0', // 默認是 localhost
    port: '8000', // 默認是 3000 端口
    open: true, // 瀏覽器自動打開
    https: false, // 是否開啓 https
    ssr: false, // 服務端渲染
    base: './', // 生產環境下的公共路徑
    outDir: 'dist', // 打包構建輸出路徑，默認 dist ，若是路徑存在，構建以前會被刪除
    proxy: { // 本地開發環境經過代理實現跨域，生產環境使用 nginx 轉發
    '/api': {
      target: 'http://127.0.0.1:7001', // 後端服務實際地址
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
}

這邊也有一個坑，模塊路徑別名必須以 / 開頭和結尾，不然 vite 沒法識別。

4. 引入 element-plus 組件庫

執行下面的命令進行安裝：

$ npm install element-plus

這邊採用所有引入的方式，在 main.js 中添加以下代碼：

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router'
import ElementPlus from 'element-plus' // 這邊引入 element-plus

const app = createApp(App)
app.use(ElementPlus) // 使用 element-plus
app.use(router)
app.mount('#app')

這樣搞了以後發現樣式沒引進來，多是由於 beta 版的緣由，那就手動引入樣式：

import 'element-plus/lib/theme-chalk/index.css'

結果 vite 在打包的時候報錯了：

[vite] Failed to resolve module import "element-plus/lib/theme-chalk/index.cssoduleselement-pluslibheme-chalkindex.css". (imported by /src/main.js)

到 node_modules 裏面找了下，模塊路徑沒問題，爲何仍是沒法解析模塊呢？試了下右鍵查看源代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<script type="module">import "/vite/client"</script>

  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

這裏能夠看到引入了 main.js ，打開這個文件看下：

import { createApp } from '/@modules/vue.js'
import App from '/@/App.vue'
import '/@/index.css?import'
import router from '/@/router/index.js'
import ElementPlus from '/@modules/element-plus.js'
// import 'element-plus/lib/theme-chalk/index.css'

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

能夠看到全部 js 文件通過 vite 處理後，模塊路徑都被修改了，從 node_modules 引入的模塊前面都被加了 /@modules ，而 src 目錄下引入的模塊被加了 /@ ，由此獲得啓發：

import '/@modules/element-plus/lib/theme-chalk/index.css'

這邊確實是個坑，總結一下：

// 模塊路徑前面有 ./ 的解析爲從 ./src 目錄下引入的模塊
'./index.css' => '/@/index.css'

// 沒有模塊路徑的解析爲從 node_modules 引入的模塊
'vue' => '/@modules/vue.js'
'element-plus' => '/@modules/element-plus.js'

// 下面兩種能夠在 webpack 構建的項目使用，可是 vite 是沒法解析的
'index.css'
'element-plus/lib/theme-chalk/index.css'

Element plus 官方文檔
Element plus 國內鏡像

5. 引入 vuex

查看 vuex 版本：

$ npm info vuex versions

直接安裝最新版 vuex：

$ npm install vuex@4.0.0-rc.2

在 src 目錄下建立 store 目錄，在裏面建立幾個文件：

- store
  |- state.js
  |- getters.js
  |- mutations.js
  |- actions.js
  |- index.js

寫入以下內容：

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

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

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

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

// 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 中使用 vuex ：

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router'
import store from './store' // 引入 vuex
import ElementPlus from 'element-plus'
import '/@modules/element-plus/lib/theme-chalk/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.use(store) // 使用 vuex
app.mount('#app')

測試一下，在 state.js 裏面加一句：

let state = {
    username: 'admin';
}

頁面組件裏面寫一個方法：

methods: {
    handleButtonEvent() {
        this.$message.success(this.$store.state.username)
    }
}

成功獲取到 username 順便還測了一下 element-plus 組件

6. 引入 axios

安裝 axios：

$ npm install axios

在 src 目錄下建立兩個目錄：

- src
  |- api
  |  |- systemInfo.js
  |- utils
     |- request.js

在 request.js 中添加如下代碼：

import axios from 'axios'

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

export default service
關於 axios 的封裝這裏不詳細展開

而後在 systemInfo.js 中添加如下代碼：

import request from '/@/utils/request'

let systemInfo = {};
systemInfo.login = function(data) {
    return request({
        url: '/api/fin-services/v1/system-info/login',
        data,
        method: 'post'
    })
}

export default systemInfo

在接口請求以前，確保 vite.config.js 中設置了代理，不然跨域請求會被瀏覽器同源策略阻止：

const path = require('path')

module.exports = {
    alias: {
        '/@/': path.resolve(__dirname, './src')
    },
    proxy: {
        '/api': {
            target: 'http://127.0.0.1:7001', // 後端實際地址
            changeOrigin: true,
        }
    }
}
後端若是響應頭設置了 ACAO 也能夠不用代理

通過這樣配置以後，你會看到瀏覽器發送的地址是：

http://localhost:8000/api/fin-services/v1/system-info/login

這個地址會被 vite 內置的 koa-proxies 轉發給實際後端地址：

http://127.0.0.1:7001/api/fin-services/v1/system-info/login

能夠參考：https://github.com/vitejs/vit...

未完待續

下一篇教程會分享如何使用 Vue3.0 風格的 api 進行開發，敬請期待！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程