首先，去 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 里的，当然你也可以引入自己的 reset
<style lang="less">
@import '~vux/src/styles/reset.less';
</style>
配置 vue-loader，这项其实在配置 webpack.base.conf.js 的时候就已经配置了，至少我是这样认为的，反正我是没管这项（文档也没说具体去哪配，管不了啊），接下来安装 less-loader 以正确编译 less 源码，文档说 less@3.x 有严重的兼容问题，请暂时使用 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 页面的 <head> 标签里
<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']
至此，项目全部创建完成，可以跑起来了，是不是很开心？还是平常心吧，路还很长，坑还很多，慢慢扫雷吧！
网友评论