vue-cli 3.0配置

vue-demo

此项目是一个vue基础项目，以后需要新的vue项目时，可以直接复制此项目。使用时请修改README.md里的内容，删除readmeImg文件夹

---

此demo用vue-cli 3.0新建，具体操作请参见下文（vue-cli 3.0 教程详见：https://cli.vuejs.org/zh/guide/）。

建议安装yarn或cnpm替代npm

项目克隆以后请先 cnpm install ,然后运行npm run serve启动项目

默认配置在根目录的vue.config.js里（如果没有就新建一个）

关于移动端rem适配的具体配置

1、首先安装 lib-flexible 和 postcss-loader和postcss-px2rem

cnpm install --save-dev lib-flexible postcss-loader postcss-px2rem

2、在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

3、在项目public目录的index.html头部加入手机端适配的meta的代码

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">

4、在根目录的配置文件vue.config.js（如果没有请新建一个）中添加配置

css: {

loaderOptions: {

css: {

},

postcss: {

  // 这是rem适配的配置  注意： remUnit在这里要根据lib-flexible的规则来配制，如果您的设计稿是750px的，用75就刚刚好。

  plugins: [require('postcss-px2rem')({

      remUnit: 75

  })]

}

}

}

vue-cli 3.0 新建项目教程

1、全局安装vue-cli 3.0以后运行命令 vue create hello-word 新建项目，然后进去安装过程，第一步是选择项目的配置，此处选Manually select features手动配置项目（上下键移动项，回车选择）

2、第二步选择要使用的插件（上下键移动，空格选择，回车进入下一步），此处选babel，Router，Vuex，Css，Linter

3、第三步询问是够使用history模式，输入Y回车

4、第四步选择less

5、第五步选择eslint相关配置，此处我选第三项默认配置

6、第六步是选择何时进行lint校验，保存时校验还是fix时

7、第七步询问单独配置还是一起在packpage中配置，选单独配置

8、最后是否存储以上配置以便下次新建项目时使用

9、回车等待，至此新建成功，新项目默认没有vue.config.js，需要在根目录手动创建，然后进行自己需要的配置