Vue2.x + vux2.x + vux-loader + typescript 搭建第一个环境

  • 前置条件

  已经安装nodejs, vue-clicss

  • 使用vue搭建第一个app

 

  • 添加Vux和Vux-loader

  step1:  npm install vux-loader --savehtml

  step2: 在build/webpack.base.conf.js文件下 修改plugin配置vue

    const vuxLoader = require('vux-loader')node

    const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfigwebpack

    module.exports = vuxLoader.merge(webpackConfig, {web

      plugins: ['vux-ui']vue-cli

    })typescript

  step3: 参考下面添加其余配置, 如less, lessloadershell

  https://doc.vux.li/zh-CN/install/manual-usage.htmlnpm

      step4: 安装typescript

 
  • 遇到的error

  1. npm run dev 显示以下错误

    * !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-3e948aa6","scoped":false,"hasInlineConfig":false}!../../../..
    /vux-loader/src/after-less-loader.js!less-loader?{"sourceMap":true}!../../../../vux-loader/src/style-loader.js!../../../../vue-loader/lib/selector?type=styles&index=0!./index.vue in ./n
    ode_modules/vux/src/components/cell/index.vue

    解决方案:npm install less less-loader --save-dev

  • 参考资料

    1. Vuex2.x官方文档  https://doc.vux.li/zh-CN/install/npm.html
    2. Vue2.x官方文档  https://cn.vuejs.org/v2/guide/installation.html