Vue常用配置

# 安装模块
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification 打包
npm run build
打包需要在webpack.prod.conf.js中
output里面加入
publicPath:'./'
打包后可能还要修改css里面的静态资源路径

# 引入Jquery
npm install jquery@2.1.0 --save
# 在webpack.base.conf.js中 引入
var webpack = require("webpack")
# 找到module.exports 添加
plugins: [
  new webpack.optimize.CommonsChunkPlugin('common.js'),
  new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery"
  })
]
# 在main.js 
import $ from 'jquery'

# 引入bootstrap
npm install bootstrap@3.3.7 --save
# 在main.js中引入
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap/dist/js/bootstrap.min"

# 引入lodash
npm install lodash --save
在组件中引入：
import "lodash"
# 用于便捷的数据操作

# 引入 countUp
# 安装
npm install countup --save
# main.js中引入
import "../static/js/countUp.min"
# 用于数字滚动操作

# 引入 iview
npm install iview --save
# main.js 加入
import "iview/dist/styles/iview.css"  
import iView from "iview"  
Vue.use(iView);  
# 后台管理界面UI框架

# 使用Swiper
npm install swiper --save
在需要的组件中
import "swiper/dist/css/swiper.min.css"
import Swiper from "swiper/dist/js/swiper.min"

# 安装less处理
npm install less --save-dev
npm install less-loader --save-dev
npm install
npm run dev
# 新建自己的less文件
# 在组件中
<style rel="stylesheet/less" lang="less">
  @import url("../less/index.less");
</style>

# 使用Echart图标
npm install echarts -S
# main.js中配置
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
# 组件中使用
# 创建div模板
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
# 在methods中创建并使用
  drawLine(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
          title: { text: '在Vue中使用echarts' },
          tooltip: {},
          xAxis: {
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
          }]
      });
  }
# 在mounted中调用
  this.drawLine();
# 或则可以按需引入
  // 引入基本模板
  let echarts = require('echarts/lib/echarts')
  // 引入柱状图组件
  require('echarts/lib/chart/bar')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')