vue如何利用脚手架配置环境创建PC端的项目

vue如何利用脚手架配置环境创建PC端的项目
（步骤详解，文件名介绍，rem配置，css基础样式的导入，git管理项目，安装axios，element-UI，至开始项目敲码）**
创建项目
在电脑D盘中（看个人）创建

vue create demo-222

第一步：请选择预调装置

manually select features
手动选择功能
第二步：选择项目需要的功能

这边会选择babel，router，css三个，vuex看个人情况
第三步:是否需要历史模式
这里需要后端配合所以no
第四步：选择样式处理的包

选择第二个
第五步：你想要把文件放在那里

放在单独的文件中
第六步：是否需要保存配置下次使用

看个人，不强求

现在就开始创建，完成项目了
把文件夹拖到vscode中打开
--------------------------------------第一阶段结束-----------------------------------------------------------------

第一步：准备 .prettierrc 文件
任何人打开你的项目都会按照你的.prettierrc规则进行运行

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

不加封号
用单引号
去掉多余逗号
如果在第一阶段第二步勾选了linter，则需要在package.json添加linter规则
**第二步：新建 vue.config.js **
配 置自动打开浏览器

module.exports = {
  devServer: {
    open: true,
    //端口号设置
    port: 8888
  }
}

目录别名的配置
目录别名如果不配置，也可以使用，@代表的就是src文件夹

  // 别名的配置
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('./src'))
      .set('components', resolve('./src/components'))
      .set('pages', resolve('./src/pages'))
      .set('assets', resolve('./src/assets'))
      .set('styles', resolve('./src/styles'))
      // set第一个参数：设置的别名，第二个参数：设置的路径
  }

rem的配置（视个人情况而定，我这边需要只在手机端打开所以需要配置）

1. 安装插件

 yarn add lib-flexible postcss-px2rem

第一个包动态设置html的font-size大小
第二个包将px单位转换成rem
2. 在 public 中的 index.html 中删除 meta 标签
flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。
3. 在 src / main.js 中导入插件包
// 导入 rem 的 js, 动态的设置了, 不同屏幕的html根元素的 font-size

   import 'lib-flexible'

4. 配置 vue.config.js

   // rem 的配置
       css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            // 值 = 设计图设计的的手机屏宽 / 10   (360 / 10)
            remUnit: 36
          })
        ]
      }
    }
  }

综合：

const path = require("path"); // 引入path模块
function resolve(dir) {
  return path.join(__dirname, dir); // path.join(__dirname)设置绝对路径
}

module.exports = {
  devServer: {
    open: true,
    // 解决跨域问题
    proxy: {
      "/insurance": {
        target: "http://cs.5gbaoxian.com:8008//", // 接口地址
        changeOrigin: true // 是否跨域
      }
    }
  },
  // 别名的配置
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("./src"))
      .set("components", resolve("./src/components"))
      .set("pages", resolve("./src/pages"))
      .set("assets", resolve("./src/assets"))
      .set("styles", resolve("./src/styles"));
    // set第一个参数：设置的别名，第二个参数：设置的路径
  },
  // rem 的配置
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require("postcss-px2rem")({
            // 值 = 设计图设计的的手机屏宽 / 10   (360 / 10)
            remUnit: 37.5
          })
        ]
      }
    }
  }
};

第三步：css基础样式的导入 和在线图标库的使用
在src跟目下创建styles文件夹，里面放base.css文件
引入中提供的base.css, 在main.js中引入

// 引入基础样式
import "./styles/base.css";

// 引入iconfont字体图标
import "./styles/iconfont.css";

eg：选择图标之后选择查看在线链接
复制网址在网页中打开
将内容复制并覆盖原来的文件iconfont.css
有网才能使用

使用方式, 给标签 class 添加 iconfont 和下面显示的图标名
sapn标签或者i标签都可以

 <span class="iconfont iconnew"></span>

提交代码, 新建远程仓库进行推送

先本地提交
git add  .
git commit -m "初始化提交 - 配置vue.config.js"

选择ssh的地址, 进行远程提交 使用最后两行

--------------------------------------第二阶段结束-----------------------------------------------------------------

axios和elememt-ui 见其他文章

前情------------------------------------------------------------------------------------
router/index.js main.js App.vue 三个的关系

创建router/index.js文件，用于配置路由的规则

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from 'pages/Home.vue'
import Login from 'pages/Login.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home, name: 'home' },
    { path: '/login', component: Login, name: 'login' }
  ]
})

export default router

在main.js关于路由和vue实例

import router from './router'

...

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

在App.vue配置路由的出口

<template>
  <div id="app">
    <!-- 路由出口 -->
    <router-view></router-view>
  </div>
</template>