创建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 

 

 

  

posted @ 2018-03-15 14:49  但沉默。  阅读(890)  评论(0编辑  收藏  举报