VueCli 构建以及安装rem、less

安装前准备

1. 打开某一文件目录，在目录栏输入 cmd 回车

2. 安装cnpm

可以忽略此步骤，cnpm是淘宝镜像比npm国外镜像快很多，下载更快，如没安装，把命令前缀cnpm换成npm执行也是一样的

• 窗口执行 npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue脚手架 2.x

1. 安装全局vue-cli 模块

• 在cmd窗口输入cnpm install vue-cli -g(安装一次即可)

2. 构建vue脚手架

3. 构建vue脚手架 执行 vue init webpack web03

语法 vue init webpack [项目名称]

4. 当前项目名称 回车

注意y表示yes，n表示no

5. ？ Project name ( my-project ) 输入y, 回车
6. ？project description ( A Vue.js project ) 回车
7. ？Author ( xxxxxx xxxxx@xx.com ) 回车
8. ？ Vue build ( user arrow Keys ) 回车
9. ? Install vue-router？（Y/n）输入n 回车 （是否安装路由）
10. ？Use ESLint to lint your code？ (Y/n) 输入n回车（是否安装路由）
11. ？Set up unit tests (Y/n) 输入n 回车 ( 是否安装单元测试 )
12. ？Setup e2e tests with Nighwatch？(Y/n) 输入n 回车 (是否安装e2e测试)
13. ？Should we run npm install for you after the project has been created？ (recommended) (use arrow Keys) （选择安装方式) 选择Yes, use NPM 回车

14. 等待安装。。。

15. 安装成功

16. 执行 cd web03 进入项目目录

17. 执行 npm run dev 启动项目

18. 启动成功 访问 localhost:8080

19. 大功告成

安装less loader

1. 执行 cnpm install less less-loader --save-dev

2. 在build/webpack.base.conf.js 下配置loader

module对象下的rules数组里边配置

{
  test: /\.less$/,
  loader: "style-loader!css-loader!less-loader",
}

3. 大功告成

• 配置前
• 配置后

安装rem适配

1. 执行安装lib-flexible插件 cnpm i lib-flexible --save

2. 在项目入口文件 main.js 里 引入 lib-flexible，import ‘lib-flexible’

3. 安装px2rem-loader cnpm i px2rem-loader --save-dev

4. 配置 build/utils.js。

5. 在cssLoaders方法中添加以下代码

const px2remLoader = {
   loader: 'px2rem-loader',
   options: {
     remUnit: 75
   }
 }

2. 将变量px2remLoader放入generateLoaders方法中的loaders数组中

3. 大功告成啦，查看审查元素,转换rem成功

安装vue脚手架 3.x/4.x

1. 全局安装vue-cli 执行 npm install -g @vue/cli (只需要安装一次)

2. vue create [项目名称] 执行 vue create web03cn

3. 

按↓键，选择defconfig (router,vuex,less,bable,eslint)回车

4. 执行 cd web03cn

5. 启动项目 执行 npm run serve

3.x/4.x安装rem适配

1. 安装依赖 执行 cnpm i lib-flexible postcss-px2rem --s

2. main.js文件中引入lib-flexible

import 'lib-flexible/flexible'

3. 找到根目录的postcss.config.js文件，如果没有，新建一个postcss.config.js文件

4. 在postcss.config.js写入配置

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px2rem': {
      remUnit: 37.5, // 50px = 1rem
      remPrecision: 2 // rem的小数点后位数
    }
  }
}

5. 重新启动项目 npm run serve

注：2.x|3.x|4.x版本为vue-cli的版本并非vue版本，详见package.json