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

一、安装vue-cli 3

首先官方文档: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

 二、配置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。那么问题来了,对于这么一个入口,肯定不能直接按照vux-loader的方法直接在配置文件置空webpackConfig了。而单独组件引用的话又被告知使用错误(事实上都直接报错了,因为没有正确对于组件的load)。
参照vux-loader文档的配置说明,那么就是merge以下vux-loader的配置到webpackConfig里面呗,接下来就简单了。我们只需要在vue.config.js文件中的webpackConfig的配置中mergevux-loader就行了

这部分内容是参考: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是否可用。

实验证明,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属性,使用项目名。

Logo

前往低代码交流专区

更多推荐