vue-cli3 脚手架搭建h5基础模板框架

1.vue-Cli3 脚手架命令行创建

1.通过脚手架工具创建基本的vue项目 ------使用命令 vue create 项目名称(不可使用驼峰式命名，包含大写字母的)

2.选择创建的模板 default是脚手架一个默认的模板，里面只带的有babel和eslint 两种插件

选项 Manually是一个自定义模板可以自行选择添加的插件进行创建脚手架的模板 这里选择第二个，进入自定义插件创建脚手架（自己选择进行添加所需的插件）

 2 >( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 
 3 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
 4 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
 5 ( ) Router // vue-router（vue路由）
 6 ( ) Vuex // vuex（vue的状态管理模式）
 7 ( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
 8 ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
 9 ( ) Unit Testing // 单元测试（unit tests）
10 ( ) E2E Testing // e2e（end to end） 测试 

3.上图，使用空格自定义选择需要添加的插件，选择完成后回车进入下一步，这里我选择在加上路由（Router） Vuex ,css Pre-proessors(css的预处理) linter（代码风格格式化） babel 4.上图是在自定义插件选择后，这个询问是否选择路由使用history模式 ，这里我选择不适用history模式 具体history模式和hash模式的差距可以查看vue官网

5.上面两张图 第一张代表的是，让我们选择一个css预处理的方式，是less还是sass 、根据自己的需要选择，如果一开始没有选择css预处理的插件则不会出现这个选项

第二张图片 是选择代码格式化的规则，ESLint + Prettier //使用较多

6.第一张图是询问在什么时候进行代码格式检测，第一个选项，每一次编写代码后进行保存的时候，第二个就是在代码进行git提交的时候进行代码格式检测，选择第一个方式合适一些

第二张图是让开发者选择配置文件存放在什么地方 这句话询问是否将现在配置的模板，是否保存为模板供以后使用 自行考虑选择

回车之后，脚手架就创建完毕了 不出错的话，就会生成一个最基本的vue项目 接下来再根据这个基本的项目进行一些方便开发的配置。

2.配置Vant

针对vue开发，选择一个合适的ui组件库还是很重还要的，之所以选择vant，因为vant是vue官网打广告的，当然有赞团队真的很能打，vant 组件库很全面，值得选择的很实用的一个组件库

1.使用 npm 命令行安装vant —根据官网推荐的上手方式进行安装操作

npm i vant -S    (npm install vant -save) 

2.引入组件 使用官网推荐的自动按需引入的方式，

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 第一步首先安装 能够按需引入vant组件的插件
npm i babel-plugin-import -D


// 第二步 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}


// 对于使用 babel7 的用户，可以在 babel.config.js 中配置 在babel.config.js中配置
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ] 

3.在代码中进行 引用 vant 组件

import { Button, Icon } from 'vant'
Vue.use(Button).use(Icon) 

3.移动端或web端 适配处理

(1) 使用u-reset.css文件进行px转rem适配

1.安装u-reset.css依赖，

npm install u-reset.css -save

2.在main.js中引入ureset.css文件

import ‘u-reset.css’

3.在入口文件中 index.html中设置设备需要适配的屏幕宽度，手机一般设置为 750 电脑端设置为1920

(2) 使用 postcss 中的 postcss-plugin-px2rem（px转换成rem单位）

这个插件主要是实现，我们在编写css样式的时候使用px作为单位的，自动将我们在css里面使用到的px单位，全部转换成rem的单位，方便我们实现移动端和电脑端的设备 进行不同屏幕宽度的适配。

1.安装该插件

插件文档：www.npmjs.com/package/pos…

npm i postcss-plugin-px2rem  --save 

2. 在vue.config.js中进行配置该插件的参数，

module.exports={
    // 配置项目css相关
  css: {
    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中
    extract: true,
    //是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。
    sourceMap: true,


    // css预设器配置项
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-plugin-px2rem")({
            // rootValue: 100, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            // propBlackList: [], //黑名单
            exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换