Vue丨构建 Vue + Webpack + Vux 项目的记录

首先，去 Node 官网下载安装包安装 Node.js，我装的是Windows 系统 64 位的，安装完毕后调出 cmd 命令工具检查是否安装成功：

node -v 
npm -v

这一步之后，如果没用翻墙工具可以选择安装 cnpm 淘宝镜像（我没装，以后安装依赖可以用 yarn 呀！为什么非要用 npm ）

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 Vue

npm install vue -g

安装 vue 命令行工具，即 vue-cli 脚手架

npm install vue-cli -g

检查 Vue 版本信息

vue -V  // V 是大写的

创建基于 webpack 的 Vue 项目

vue init webpack mydemo

项目名称不能大写不然会报错（不知道是不是普遍现象），改掉后继续安装，换了一个报错好像是下载模板失败，换这个命令试试 vue-init webpack mydemo。

接下来是一些项目初始化的的信息提示，一直回车到提示是否要安装 vue-router ，项目中肯定要使用到路由所以 y 回车，剩下的诸如 ESLint 等一些测试检测信息看个人需求选择 y 或 n，接下来提示是用使用 npm 还是 yarn，这个也是看个人需求，我是按回车按的顺手了，直接就给 npm 过了（说好的 yarn 呢！），至此一个基于 webpack 构建的项目创建完毕，找到项目目录，点击进入， shift + 鼠标右键，选择在此打开命令窗口，安装依赖

npm install

安装完依赖后运行

npm run dev

项目成功运行后我们继续，安装 vux

npm install vux --save

然后继续安装这个，文档压根没提要安装，所以一直报错报错，后来百度之后才知道，真坑

npm install vux-loader --save-dev

安装完毕之后找到在 build 文件夹里找到 webpack.base.conf.js 按照文档进行如下配置

const vuxLoader = require('vux-loader')
const webpackConfig = {
      // 把原来 module.exports 里的代码全部剪切到这里
} 
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

然后打开 vux 文档，按照手动安装配置里的介绍继续配置，首先引入 reset.less，这个是放到 App.vue 里的

<style lang="less">
@import '~vux/src/styles/reset.less';
</style>

配置 vue-loader，这项其实在配置 webpack.base.conf.js 的时候就已经配置了，至少我是这样认为的，反正我是没管这项（文档也没说具体去哪配，管不了啊），接下来安装 less-loader 以正确编译 less 源码，文档说 [email protected] 有严重的兼容问题，请暂时使用 less@^2.7.3，所以还要做个 less 降级处理

npm install less less-loader --save-dev
npm install less@^2.7.3 --save-dev  // less 降级

安装 yaml-loader 以正确进行语言文件读取（看个人需求吧，我没配置）

npm install yaml-loader --save-dev

添加 viewport meta，放到唯一的那个 index.html 页面的标签里

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

添加 Fastclick 移除移动端点击延迟，这个是放在 main.js 里的

const FastClick = require('fastclick')
FastClick.attach(document.body)

添加 vue-router 创建项目时装了前端路由，忽略

import VueRouter from 'vue-router'
Vue.use(VueRouter)

添加 webpack plugin，在构建后去除重复css代码，在 webpack.base.conf.js 里改

plugins: [
    {
      name:'vux-ui'
    },{
      name: 'duplicate-style'
    }
  ]

检查 webpack.base.conf.js 里 resolve 是否缺少 extension 配置，缺少的话就加上

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

至此，项目全部创建完成，可以跑起来了，是不是很开心？还是平常心吧，路还很长，坑还很多，慢慢扫雷吧！

Vue丨构建 Vue + Webpack + Vux 项目的记录

猜你喜欢