npm install
npm run dev
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'
npm install bootstrap@3.3.7 --save
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"
# 用于数字滚动操作
npm install iview --save
import "iview/dist/styles/iview.css"
import iView from "iview"
Vue.use(iView);
npm install swiper --save
在需要的组件中
import "swiper/dist/css/swiper.min.css"
import Swiper from "swiper/dist/js/swiper.min"
npm install less --save-dev
npm install less -loader --save-dev
npm install
npm run dev
<style rel="stylesheet/less" lang="less" >
@import url("../less/index.less" );
</style>
# 使用Echart图标
npm install echarts -S
# main.js中配置
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
# 组件中使用
# 创建div模板
<div id="myChart" :style="{width: '300px', height: '300px'}" ></div>
# 在methods中创建并使用
drawLine(){
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' )
require('echarts/lib/component/tooltip' )
require('echarts/lib/component/title' )