vue-cli 3.x脚手架配置并使用vux

女爷i 2022-05-15 11:52 467阅读 0赞

vue-cli更新到3.x，改动很大，做前端的朋友推荐我将vux项目转到vue-cli3上，通过看文档和查资料，花了几个小时，终于完成，特此记录。

# 一、安装vue-cli 3 #

首先官方文档：[https://cli.vuejs.org/][https_cli.vuejs.org]

官方文档包含了很多的内容，很靠谱，比较全面，第一步当然是把官方文档看一遍。

## 安装 ##

Node 版本要求

Vue CLI 需要 [Node.js][] 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 [nvm][] 或 [nvm-windows][]在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
    # OR
    yarn global add @vue/cli

你还可以用这个命令来检查其版本是否正确 (3.x)：

vue --version

##  创建项目 ##

运行以下命令来创建一个新项目：

vue create demo

随后选择babel，eslint 还有router !

安装完成后，按照提示可以看到界面

cd 项目名
    
    npm run serve

![70][]

#  二、配置vux #

在网上搜了会，发现几乎都是vue-cli旧版的配置方法，有一些已经不能用了，在这里整理下正确的配置方法

## 安装各插件 ##

1、安装vuex

npm install vuex --save-dev

2、在项目里面安装vux

npm install vux --save

3、安装vux-loader（必须安装）

npm install vux-loader --save-dev

4、安装less-loader（这个是用以正确编译less源码，否则会出现 ' Cannot GET / '）  
npm install less less-loader --save-dev

5、安装yaml-loader  (以正确进行语言文件读取)

npm install yaml-loader --save-dev

## 配置vux环境 ##

这里注意由于vue-cli3使用的是webpack4而且更新过vue-loader，所以vux使用起来会存在一些兼容的问题，这里需要额外配置一下。

官方更新过vue/cli3.x 的vue-loader，正常配置会导致加载错误。所以需要手动指定vue-loader的版本来解决加载问题。

yarn add vue-loader@14.2.2 -D
    or
    npm install vue-loader@14.2.2 -D

在packageage同级目录下新建一个文件vue.config.js

vue-cli3.x的一些服务配置整个的结构都迁移到[CLI Service][]里面了，对于一些基础配置和一些扩展配置提供了[`vue.config.js`][vue.config.js]。那么问题来了，对于这么一个入口，肯定不能直接按照[vux-loader][]的方法直接在配置文件置空webpackConfig了。而单独组件引用的话又被告知使用错误（事实上都直接报错了，因为没有正确对于组件的load）。  
参照vux-loader文档的配置说明，那么就是merge以下vux-loader的配置到webpackConfig里面呗，接下来就简单了。我们只需要在`vue.config.js`文件中的webpackConfig的配置中mergevux-loader就行了

这部分内容是参考：[https://segmentfault.com/a/1190000014586699][https_segmentfault.com_a_1190000014586699]

根据官方文档，在文件里加入以下内容：

module.exports = {
        configureWebpack: config => {
            require('vux-loader').merge(config, {
                options: {},
                plugins: ['vux-ui']
            })
        }
    }

在这里贴一下`vue.config.js`文件的配置，这是我目前用的配置

module.exports = {
            // 基本路径
         baseUrl: process.env.NODE_ENV === 'production'
        ? '/langya/'
        : '/langya/',
        // vux 相关配置,使用vux-ui
        configureWebpack: config => {
            vuxLoader.merge(config, {
                options: {},
                plugins: ['vux-ui']
            })
        },
        devServer: {
            port: 8081
        },
        css: undefined,
        lintOnSave: false,
        outputDir: undefined,
        assetsDir: undefined,
        runtimeCompiler: true, //包含运行时编译器的 Vue 构建版本
        productionSourceMap: false,
        parallel: undefined
    }

这样，配置就完成了，我们来测试以下，vux是否可用。

![70 1][]

![70 2][]

实验证明，OK ！

这样，给予vue-cli3的vux就配置完成了。

此外，个人比较喜欢router的history模式，修改方法：

import Vue from 'vue'
    import Router from 'vue-router'
    import Home from './views/Home.vue'
    
    Vue.use(Router)
    
    export default new Router({
      base:'demo',
      mode:'history',
      routes: [
        {
          path: '/',
          name: 'home',
          component: Home
        },
        {
          path: '/about',
          name: 'about',
          // route level code-splitting
          // this generates a separate chunk (about.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
        }
      ]
    })

在Router 里面加上mode属性就行了，还可以使用base属性，使用项目名。

[https_cli.vuejs.org]: https://cli.vuejs.org/
[Node.js]: https://nodejs.org/
[nvm]: https://github.com/creationix/nvm
[nvm-windows]: https://github.com/coreybutler/nvm-windows
[70]: /images/20220515/c31bfcdae982481ea3f8e8f189c10d87.png
[CLI Service]: https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md
[vue.config.js]: https://github.com/vuejs/vue-cli/blob/dev/docs/config.md
[vux-loader]: https://doc.vux.li/zh-CN/vux-loader/install.html
[https_segmentfault.com_a_1190000014586699]: https://segmentfault.com/a/1190000014586699
[70 1]: /images/20220515/18bd8ae5b29c45ff92c8e9d3f7911516.png
[70 2]: /images/20220515/340f512d5ab141e197c05edb31841413.png