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

淡淡的烟草味﹌ 2023-01-10 14:37 48阅读 0赞

第一步：创建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);

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