vue-cli项目环境配置及用到的知识点

vue-cli项目环境配置

安装node,npm,webpack,vue-cli

###官网下载node ,npm已经在node.js安装好了

node -v 看版本号
npm -v

npm install webpack -g    (若webpack不能用，需安装webpack-cli)
webpack -v   

npm install -g vue-cli
vue-V（这里用大写的V）

vue init webpack myvue  （生成项目）

npm run dev  (运行项目)

安装路由模块

npm install vue-router --save

安装网络请求模块

npm install axios --save
npm install qs --save 

在main.js中全局配置
//axios请求数据
import axios from 'axios';
import qs from 'qs';
Vue.prototype.axios = axios ;   //全局注册，使用方法为:this.axios
Vue.prototype.qs = qs ;          //全局注册，使用方法为:this.qs
在.vue文件中的应用
get请求：
this.axios.get('/bpi/sug?code=utf-8',{
   params:{
      q:'卫衣',
      callback:'cb'
   },
}).then((res)=>{
     console.log(res);
})
post请求：
(有时需要将this赋值给that,一般用请求成功时需要给data中的数据赋值不成功时)
var that = this;
 that.axios({
    method:'post',
    // url:'/test/index/Nine_Kids/details',
    url:process.env.API_HOST+'index/establish/info',
    // url:process.env.API_HOST+'index/security_code/index',
    data:that.qs.stringify({
      anowerid:that.anowerid,
      titleid:that.titleid, 
    })
  }).then(function(res,reject){
    console.log(res);
 })

本地请求后端地址时需要配置代理

在congig文件夹下的index.js中的proxyTable:{}改为
proxyTable: {
    '/bpi': {
        target: 'https://suggest.taobao.com/', // 接口的域名 (百度测试接口)
        // secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
            '^/bpi': '/'
        }
    },
  '/test': {
    target: 'http://baidu.com/', // 接口的域名
    // secure: false,  // 如果是https接口，需要配置这个参数
    changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
    pathRewrite: {
      '^/test': '/'
    }
  }
},
在config文件夹下的dev.env.js中加
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST:"/test/"  //添加的内容
})
在config文件夹下的prov.env.js中加
module.exports = {
  NODE_ENV: '"production"',
  API_HOST:'"'http://baidu.com/"'  //添加的内容
}

安装vue移动端适配

npm install lib-flexible --save

在main.js中全局配置
 //vue移动端适配
 import 'lib-flexible'
 
在util.js中const cssLoader = {}, 和const postcssLoader = {}的中间加
 const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75 // 设计稿的1/10
    }
  }
效果为：
const cssLoader = {},
const px2remLoader = {},
const postcssLoader = {},

并将原代码
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
替换成
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]


在.vue文件中写代码直接用 px 就可以，会自动转成rem 

使用sass预编译

npm install node-sass --save

解决Safari ( WKWebview ) 返回后页面不刷新的问题

var browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/;
    if (browserRule.test(navigator.userAgent)) {
        window.onpageshow = function(event) {
            if (event.persisted) {
                window.location.reload()
            }
        };
    }

对象转数组的方法

//obj为对象，arr为数组
 arr=Object.values(obj)

双向绑定，循环radio,其中每一类问题的v-module的值要不一样，记录每一个问题选中的值

给每一个input添加点击事件，每次点击的时候以对象的方式放在数组中，通过数组去重，判断当且已点击的所有选项的值

radio样式重写，并记录每一次选中的值，让所有选中的值替换颜色

/*html*/
<span class="radioStyle" :style="bgRadioStyle" v-bind:class="{check:anowerid.indexOf(pro.c_id) !== -1}"></span>
<div class="radio-label">
 <input class="blem-list-input" type="radio" :id="pro.c_id" :value="pro.c_id+pro.points" v-model="list.scale"  >
 <label class="blem-list-title"  :for="pro.c_id" v-html="pro.title"></label>
</div>

/*css*/
 input[type="radio"]{
    display: none;
  }
  .radioStyle{
    width: 32px;
    height: 32px;
    /*background-image: url(/static/img/project-input.png);*/

    background-repeat: no-repeat;
    background-position: 0px -20px;
    display: inline-block;
    background-size: 100%;
  }
  .check{
    background-position: 0px 8px;
  }
  
/*anowerid.indexOf(pro.c_id)!== -1 用到了判断字符串中是否包含某个字符，等于-1代表没有匹配到*/ 

vue中图片和背景图片打包代码时路径出现问题的解决方法

/*直接写图片用的方式*/
![在这里插入图片描述]()
/*背景图片用的方式*/
 <div class="result-box" :style="bgResultBox"></div>
 
 <script>
  export default {
    data:function(){
      return{
         bgResultBox: {
            backgroundImage:"url(" + require("../../static/img/project-result.jpg")+ " )"
         },
      }
    }
  }
 </script>
 
 
 在build文件夹中的util.js中添加
 if (options.extract) {
       return ExtractTextPlugin.extract({
         use: loaders,
         fallback: 'vue-style-loader',
         publicPath:'../../'  //需要添加的代码
       })
     } else {
       return ['vue-style-loader'].concat(loaders)
     }
 

数组对象去重

/*this.count为数组*/
let hashCount = {};
this.count.push(obj);
let config = this.count;

config = [...config, obj];

const newCountArr = config.reduceRight((item, next) => {
  hashCount[next.countId] ? '' : hashCount[next.countId] = true && item.push(next);
  return item
}, []);
console.log(newCountArr);

选项卡切换

 <ul class="tab-box">
    <li class="tab-list"  v-bind:class="{chartActive:isChartActive === '1'}" @click="tabBox('1')">雷达图</li>
    <li class="tab-list" v-bind:class="{chartActive:isChartActive === '2'}"  @click="tabBox('2')">柱状图</li>
</ul>
<ul class="chart-box">
    <li class="chart-list" v-bind:class="{chartActiveShow:isChartActive === '1'}">
      <div id="myChart" :style="{width: '100%', height: '300px'}"></div>
    </li>
    <li  class="chart-list" v-bind:class="{chartActiveShow:isChartActive === '2'}">
      <div id="barChart" :style="{width: '320px', height: '300px'}"></div>
    </li>
</ul>

<script>
export default {
  data:function(){
    return{
      isChartActive : '1'
    }
  },
  methods:{
      //  雷达图和柱状图的切换
      tabBox(value){
        this.isChartActive = value;
  
      },
  }
}
</script>

textarea 字数限制

 <textarea class="textarea-style" maxlength="200" @input="descInput" placeholder="最多输入200个字"  name="text"  cols="30" rows="10" v-model="proposal"></textarea>
 <span class="xianzhi">{{remnant}}/200</span>
 <script>
 export default {
   data:function(){
     return{
       remnant: 200,//textarea限制字数 ，50个汉字,
       proposal:'',//建议
     }
   },
   methods:{
       //  字数限制方法
       descInput(){
         var txtVal = this.proposal.length;
         this.remnant = 200 - txtVal;
       },
   }
 }
 </script>
              

vue获取地址栏中？后的地址

在assets文件夹添加script文件夹，添加utils.js,其中util.js文件中的内容是

export default{
    getUrlKey: function (name) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
    }
}

在main.js中加入
//获取地址栏中的参数
import utils from './assets/scripts/utils'
Vue.prototype.utils = utils // main.js中全局引入

在.vue文件中应用
<script>
 export default {
   data:function(){
     return{
       titleid:this.utils.getUrlKey('id'),//titleID
       userid: this.utils.getUrlKey('uid'),//  用户id
     }
   },
 }
 </script>

本地存储

 localStorage.setItem('titleid',this.utils.getUrlKey('id') );//titleID
 localStorage.setItem('userid',this.utils.getUrlKey('uid') );//  用户id
 取值
 localStorage.getItem('userid')     

router-link 传参数，并获取参数的方法

 <router-link   class="people-title4" :to="{ path: 'everyscole',query: { uid:item.user_id,titleId:titleid}}">
    查看
 </router-link>
 在.vue文件中
  data:this.qs.stringify({
     uid:this.$route.query.uid, //用户名
     t_id:this.$route.query.titleId, //立项标题
  })

echart 图表在vue中的应用

根据官方文档下载echart
在main.js文件中应用
// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

在.vue文件中应用
<div id="myChart" :style="{width: '100%', height: '300px'}"></div>
<script>
 export default {
   data:function(){
     return{
        indicator: [
           {name: '公司战略', max: 5},
           {name: '竞争情况', max: 5},
           {name: '市场容量', max: 5},
           {name: '可占份额', max: 5},
           {name: '品牌/技术优势', max: 5},
           {name: '风险可控性', max: 5},
           {name: '性价比', max: 5},
           {name: '利润', max: 5},
           {name: '工业设计', max: 5},
           {name: '竞争优势', max: 5}
         ],//雷达图indicator
     }
   },
   mounted(){
    //渲染echart(雷达图)
    this.drawLine();
   },
   methods:{
     //echart
     drawLine(){
       // 基于准备好的dom，初始化echarts实例
       let myChart = this.$echarts.init(document.getElementById('myChart'))

       // 雷达图绘制图表
       myChart.setOption({
         backgroundColor: '#fff',
         title: {
           // text: 'AQI - 雷达图',
           left: 'center',
           textStyle: {
             color: '#333'
           }
         },

         radar: {
           indicator:this.indicator,
           shape: 'polygon',
           splitNumber: 5,
           name: {
             textStyle: {
               // color: 'rgb(238, 197, 102)'
             }
           },
           splitLine: {
             lineStyle: {
               // color: [
               //   'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
               //   'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
               //   'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
               // ].reverse()
             },

           },
           splitArea: {
             // show: false,
             //图的样式
             areaStyle: {
               // color: ['#b8d3e4', '#96c5e3', '#7DB5DA', '#4693FF','#217FFF']
             }
           },
           axisLine: {
             lineStyle: {
               color: '#217FFF'
             }
           }
         },
         series: [
           {
             name: '平均分',
             type: 'radar',
             lineStyle: lineStyle,
             data: [1,2,3,3.4,2.6,1.2,4,3.5,3,0],
             // radius : 50,
             label: {
               normal: {
                 show: true,
               }
             },
             // symbol: 'none',
             itemStyle: {
               normal: {
                 color: '#000',
               }
             },
             areaStyle: {
               normal: {
                 opacity: 0.1
               }
             }
           },
         ]
       });
     }
   }

 }
 </script>