Vue3.0 + Vite 初体验（一）项目配置

头像
一杯绿茶
    阅读 7 分钟
    40

    Vue3.0 已经发布一段时间了，特别是还发布了一个打包构建工具 Vite，据说是可以干掉 webpack 的，趁这段时间有空，本人也体验了一下。

    想使用 Vue3.0 不一定要用 Vite，vue-cli 也可以构建。检查一下 CLI 版本，确保升到4以上，然后执行 vue create xxx 会出现几个选项，选第二个就可以创建 Vue3 项目。

    image.png

    使用 CLI 构建的项目还是使用 webpack 进行打包的，这里就不展开了。这里介绍下用 vite 构建。首先安装 vite 构建工具：

    $ npm install -g create-vite-app

    创建项目：

    # 下面两个命令都可以
$ create-vite-app vue3-demo
$ cva vue3-demo

    跟 CLI 不一样，vite 目前没有提供命令行交互的选项，就是按照默认的模板进行创建的。CLI 创建项目会自动从 npm 拉取依赖，而 vite 创建项目没有拉取依赖，因此执行命令之后很快就创建完成了。

    image.png

    创建完成的项目结构是这样的：

    image.png

    package.json 中可以看到依赖非常少，只有 vite 和 @vue/compiler-sfc ，没有 babel，因为 vite 是通过浏览器去解析模块。

    image.png

    接下来手动拉一下依赖：

    $ npm install

    然后启动项目：

    $ npm run dev

    简直就是秒开，不用打包实在快！注意 vite dev server 默认端口是3000，这边改为了 8000 端口，后面会讲怎么改配置。

    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 进行开发，敬请期待！

    前端vue3vite
    一杯绿茶
    199 声望17 粉丝

    人在一起就是过节，心在一起就是团圆

    « 上一篇
    Vue源码研究
    下一篇 »
    Vue 2.x 从零开始搭建

    引用和评论

    推荐阅读
    头像
    如何理解快速排序和归并排序

    一杯绿茶阅读 1.3k

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    0 条评论
    得票最新