vue-router 与 vux 笔记

参考链接：https://blog.youkuaiyun.com/milli236/article/details/78318768

安装 vue-router

• 首先用安装全局 vue-cli：

$ cnpm install --global vue-cli

• 安装项目目录：

$ vue init webpack project1

安装时不选择自动执行npm install。

• 进入项目目录，手动安装依赖包：

$ cnpm install

• 编译并运行项目以测试：

$ npm run dev

编译运行之后，可以进入本地服务器指定端口查看实时编译的效果。退出监听Ctrl+C。
- 打包项目：

$ npm run build

打包结果在项目目录的 dist 目录。

为了使打包后生成的 index.html 的资源路径都正确，应先到 config 目录的 index.js 找到 build:{ ... assetsPublicPath: '/', ...，将 '/' 改为 './'，注意不是 dev:{ ... assetsPublicPath: '/', ...。

---

提示

用 PhpStorm 打开项目中的 index.js 后出现大量的红线勾画，进入 Settings -> Languages & Frameworks -> 选中JavaScript -> JavaScript Language version 选择 “ECMAScript 6”。

用 PhpStorm 打开 .vue 后没有 HTML 代码色，Settings -> plugins -> 搜索 vue.js -> search in repositories ->选择 Vue.js 并 Install。之后重启 PhpStorm。

安装 JQuery：

$ cnpm install jquery --save

--save是把 jquery 的配置信息保存到根目录下的 package.json，下次直接 cnpm install 就可以安装。在要使用 jquery 的文件内使用import $ from 'jquery'。

打包若不想压缩 js 代码，可注释掉 build 目录下 webpack.prod.conf.js 文件中的

new webpack.optimize.UglifyJsPlugin({
      compress: {
          warnings: false
        },
        sourceMap: config.build.productionSourceMap,
        parallel: true
    }),

安装 vux

$ cnpm install vue-cli -g
$ vue init airyland/vux2 my_vux
$ cnpm install vux --save
$ cnpm install vux-loader --save-dev
$ cnpm install less less-loader --save-dev

在 build 目录下的 webpack.base.conf.js 文件进行配置

const vuxLoader = require('vux-loader'); //新增此句

module.exports = vuxLoader.merge(originalConfig, { plugins: ['vux-ui'] }); //新增此句：将原配置赋值给 originalConfig

最后在原配置

resolve: {extensions: ['.js', '.vue', '.json']

里加入 .less，然后就可以导入 vux 控件进行使用了。