node学习记三之vue与安装的模块(d3\echarts\jquery)

开发的项目并不是一个完整的项目，而仅仅是一个展示数据信息的一个个图表的单页面应用，类似于大屏的效果，当然技术很low.也是在学习vue 中的第一个应用，算是探索在项目中如何使用vue 来开发。先来写下安装 vue、echarts、jquery、d3需要的npm 指令及遇到的问题。

一、用到的安装模块指令

安装vue

1、全局安装  npm install --global vue-cli（淘宝镜像  npm install cnpm -g --registry=https://registry.npm.taobao.org）有时候安装出错，试一下镜像；

2、使用vue建立一个项目（project ）vue init webpack my-project）

3、遇到ESlint ，选no,其他选yes,尤其其中有个是否引入vue-router，选yes,要不以后用到路由还得重新加载。

4、在project 目录下 打开终端，npm install,安装依赖；

5、启动项目(在project下)  npm run dev

安装ecarts

npm install echarts -S(淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org)

我发现第一次安装时前面的指令报错，用淘宝镜像安装上了（node_modules下有echarts目录），后来不知道怎么删了，结果第一个指令安装了一次成功了，有点懵，都试一下吧

安装d3

npm install --save vue-d3

github上找的，如果报错，多敲几遍安装吧

安装jquery

npm install --save jquery

安装jquery,可费了老大劲，老是报错，终于成功，而且有好几次安装remove d3，把我引入的d3依赖给删了，我也不知道为什么

最后又重新安了一次，成功后，

1、在main.js中

import 'jquery'

2、在build/webpack.base.conf.js

plugins: [

new webpack. ProvidePlugin({

$: "jquery",

jQuery: "jquery",

jquery: "jquery",

"window.jQuery" : "jquery"

})

],

3、在test/util/.eslintrc

{

"env": {

"jest": true

},

"globals": {

},

"browser": true,

"jquery": true

}

加了jquery，这也是在参考了别人的博客后终于成功的。

注：在模块中用到jquery，需要重新import jquery,这是我在发现安装成功依然报 $ is not defined 后这样解决的。