创建vue脚手架及项目所需基本依赖(d3/echarts/jquery/bootstrap)
1. 用到的安装模块指令:
(1)安装淘宝镜像【避免使用npm 安装失败】
npm install cnpm -g --registry=https://registry.npm.taobao.org
(2)全局安装vue:
npm install --global vue-cli(或者可以使用淘宝镜像 ,将npm 换成cnpm即可)
(3)使用vue建立一个项目:
vue init webpack my-project(项目名称只能是中划线命名法,形如this-is-an-apple)
(4)遇到Eslint
选y(遵循eslint的语法规范,可以避免不必要的错误)
(5)遇到vue-router这种的
也都选y(避免以后用到的时候还得重新加载)
(6)找到自己创建的my-project文件夹,打开终端
npm install(【安装依赖】)
(7)启动项目(my-project)
npm run dev
(8)安装echarts
npm install echarts -s
(9)安装d3
npm install --save vue-d3
(10)安装jquery
npm install --save jquery
(11)导入bootstrap
npm install bootstrap --save-dev
2. 配置jQuery :
由于 Bootstrap 依赖于 jQuery,所以在代码中 import jQuery from ‘jquery’ 是不够的,这只是解决了自己代码对 jQuery 的依赖,要想使用Bootstrap,必须在webpack中配置jquery
(1)在webpack.base.conf.js头部添加
var webpack = require('webpack')
(2)在entry后边添加
plugins: [ new webpack.ProvidePlugin({ "$": "jquery", "jQuery": "jquery", "window.jQuery": "jquery" }) ]
(3)引入vue,bootstrap,jquery, d3及echarts
在main.js中,加入如下代码
import Vue from 'vue'
import './assets/bootstrap/css/bootstrap.min.css'
import './assets/bootstrap/js/bootstrap.min.js'
import 'jquery'
import * as d3 from 'd3'
import echarts from 'echarts'
Vue.prototype.$echarts = echarts