vue的搭建1、创建 2、引入vue-router 3、vant+sass+axios+js-md5 4、引入common+过滤5、引入pxtorem+flexible字体兼容 6、引入全局变量和函数

 

第一步：创建vue项目的几种方式
哈哈，我还是找到了最简单的一种方式 vue create hhh 然后 npm run serve 哈哈 就是这么简单

第二步：引入路由 vue-router

### 1、cnpm i vue-router --save

### 2、app.vue
<div id="app">
    <!-- 路由出口  路由匹配的组件渲染的位置 -->
    <router-view></router-view> 
</div>

### 3、新建一个libs/router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router); // 模块化工程中初始化一个路由插件

const courseCenter = ()=>import("@/pages/course-center/index.vue")
export default new Router({
    routes:[
        {
            path: '/',
            name: 'courseCenter',
            component: courseCenter,
            meta: { // 若是需要订制标题 可以这样
                title: ''
            }
        }
    ]
})

### 4、新建一个页面 pages/course-center/index.vue

### 5、mian.js 引入vue-router
// 引入路由对象
import router from "../libs/router"
new Vue({
  render: h => h(App),
  router   //注入路由对象
}).$mount('#app')

### 6、success

第三步：开始写页面 vant + sass + axios + js-md5 （ui样式 + 接口调用）

### 1、cnpm i vant --save
	打开文件 main.js 
	// 【全局使用vant ui框架】
	import Vant from 'vant';
	import 'vant/lib/index.css';
	Vue.use(Vant);

### 2、cnpm i node-sass --save-dev
       cnpm i sass-loader --save-dev

### 3、cnpm i axios --save
  打开main.js文件
  // 引入axios
	import axios from 'axios';
	import Qs from 'qs'; // qs是axios自带的库，所以不需要npm安装
	Vue.prototype.$axios  = axios; 
	Vue.prototype.$qs = Qs;


### 4、 + cnpm i js-md5 --save
  import md5 from 'js-md5';
	// 通用的鉴权方式
    paramsFilters(data) {
        let timestamp = Date.now();
        let appId = '14e1b600b1fd579f';
        var appKey = md5("appId=" + appId + "&appKey=0B80DFF54D4A8C&timestamp=" +timestamp).toLocaleUpperCase();
        let params = {
            timestamp,
            appId,
            appKey,
            ...data
        }
        return params
    },

### 5、页面.vue
	getStaffQrCode() {
      let params = {id: 973880,activityId: 455};
      let postparams = this.paramsFilters(params);
      this.$axios.post(`${baseUrl}/secretexam/getTeacherQrCode`,this.$qs.stringify(postparams)).then(({ data }) => {
          if (data.code === "Success") {
          } else {
            this.$toast("网络异常");
          }
        });
    },

### 6、success

第四步：引入公共common  + 全局的图片地址过滤 （js）

main.js文件  // 引入公共的common
import common from "../libs/common"
Vue.prototype.$common = common;

common.js 文件
import md5 from 'js-md5';
import qs from 'qs'
const common = {}
export default common;

// 全局引入imgUrl
Vue.filter('imgUrl', function(value, project = 'shorthand') {
  return ("http://***/" + project + value) ;
})

第五步： 引入pxtorem + flexible 字体兼容 （css）

### cnpm i lib-flexible --save-dev ❌
	    index.html  <script src="<%= BASE_URL %>flexible.js" ></script> ✅
    cnpm i postcss-px2rem --save-dev ❌
    cnpm i postcss-pxtorem --save-dev ✅

### 在mian.js中添加flexible
// 全局引入px2rem + flexible 兼容字体大小
import 'lib-flexible/flexible.js'

### 新建vue.config.js文件
module.exports = {
    publicPath: './',
    pwa: {
      iconPaths: {
        favicon32: 'favicon.ico',
        favicon16: 'favicon.ico',
        appleTouchIcon: 'favicon.ico',
        maskIcon: 'favicon.ico',
        msTileImage: 'favicon.ico'
      }
    },
    lintOnSave: true,
    css: {
          loaderOptions: {
              postcss: {
                  plugins: [
                        require('postcss-pxtorem')({
                            rootValue : 75, // 换算的基数
                            propList  : ['*'],
                            selectorBlackList: ['van','navhead','swiper'],
                        }),
                  ]
              }
          }
      },
    productionSourceMap: false,
    // outputDir: 'dist'
  }

第六步：引入全局的变量和函数

### 新建文件 libs/state.js 
import Vue from "vue"
export default {
    install() {
        const state = new Vue({
            data: {
                hhh: '123'
            },
            created() {},
            methods: {}
        });
        Vue.prototype.$state = state;
    }
}

### 在main.js 是加入
// 引入全局的变量和函数
import state from "../libs/state"
Vue.use(state);

第七步：基础的构建成功啦，接下来就是实际项目的开发了