vue3的配置和踩坑（安装、配置vue-router、px转rem、热更新、less、axios）

一：安装

1.vue create 工程名（注vue3： build没了、config没了，3.0的安装项目时自动下载node-model。）

2.在根目录下创建一个vue.config.js

module.exports = {

     baseUrl: process.env.NODE_ENV ===  'production'  ?  '/online/'  :  '/' ,      // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'      // outputDir: 'dist',      // pages:{ type:Object,Default:undfind }      devServer: {          port: 8888,  // 端口号          host:  'localhost' ,          https:  false ,  // https:{type:Boolean}          open:  true ,  //配置自动启动浏览器          // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理          proxy: {              '/api' : {                  target:  '<url>' ,                  ws:  true ,                  changeOrigin:  true              },              '/foo' : {                  target:  '<other_url>'              }          },   // 配置多个代理      } } 二、配置vue-router cnpm install vue-router --save 1.在src增加router文件加入js

 

 2.进行路由配置（图+代码）

 

 

import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const Routes = [   { path: '*', redirect: '/welcome' },   {     path: '/welcome',     name: '欢迎页面',     component:() => import('@/views/demo/pages/welcome')   },   {     path: '/page1',     name: 'page1',     component: () => import('@/views/demo/pages/page1')   },   ] const createRouter = () => new Router({   routes: Routes }) const router = createRouter() export default router；   3.在main.js中引入

 

 

三、px转rem 1.cnpm install  postcss-px2rem 2.在public中添加rem.js // 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem() { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientWidth / 750 // 设置页面根节点字体大小 document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' } // 初始化 setRem() // 改变窗口大小时重新设置 rem window.onresize = function() { setRem() } 3.在vue.config.js中添加（图加代码） const px2rem = require('postcss-px2rem') const postcss = px2rem({ remUnit: 32 //基准大小 baseSize，需要和rem.js中相同 }) module.exports = { css: { loaderOptions: { postcss: { plugins: [ postcss ] } } } } 4.在main.js中添加 ;(function(){   var rem = document.createElement('script');   rem.src = './rem.js';   document.body.appendChild(rem) })()   四、热更新

 

 五、配置less

1.cnpm install less less-loader --save-dev

六、配置axios

1.cnpm install axios --save

2.为了解决跨域问题，我配置了withCredential。

import axios from 'axios' import {Message} from 'element-ui' axios.defaults.withCredentials=true; //请求携带cookie var baseURL='http://192.168.0.169:8080/api';//王帅 const instance = axios.create({    baseURL  }) instance.interceptors.response.use(response => {    if(response.data.code==401){     // toLogin();     return;    }    return response;  })  export let myAxiosGet = (url, params)=>{   return new Promise((resolve, reject) => {     instance.get(url, {params,withCredentials:true}).then(function (response) {        resolve(response.data)       if(!response.data.success){         Message({           message: response.data.message,           type: 'error'         });       }     })     .catch(function (err) {       Message({         message: '获取信息失败',         type: 'error'       });       reject(err);     })   }) } export let myAxios = (method,url, params)=>{   return new Promise((resolve, reject) => {     instance({       method: method,       url,       data: params,     },{       withCredentials:true     })     .then(function (response) {       resolve(response.data);       if(!response.data.success){         Message({           message: response.data.message,           type: 'error'         });       }     })     .catch(function (err) {       Message({         message: '获取信息失败',         type: 'error'       });       reject(err);     });   }) }

 

 

   

转载于:https://www.cnblogs.com/miaSlady/p/11492074.html

相关资源：数据结构—成绩单生成器