创建vue脚手架及项目所需基本依赖（d3/echarts/jquery/bootstrap）

最新推荐文章于 2023-12-07 20:35:50 发布

转载最新推荐文章于 2023-12-07 20:35:50 发布 · 258 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/buerBlog/p/8573601.html

文章标签：

#javascript #webpack #ViewUI

本文详细介绍了如何使用Vue CLI快速搭建项目，并配置Webpack、ECharts等常用库，同时讲解了如何通过npm安装必要的依赖包，确保项目的正常运行。

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

转载于:https://www.cnblogs.com/buerBlog/p/8573601.html