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 后这样解决的。

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

Node.js基础汇总（一）：什么是Node.js，创建最简单的Node.js应用，NPM介绍，安装express模块
目录 1. 什么是Node.js? 1.1 JavaScript是什么? 1.2 Node.js 是什么? 1.3 Node.js的原理 2. 创建最简单的Node.js应用 2.1 代码示例 2.2 ...
#21天学习挑战赛#Python入门之mac安装第三方模块——详细教程
开卷有益!对于python小白而言,学习每前进一步都会遇到门槛.尽管带队老师在紧锣密鼓地往前开通学习资料权限,可是python小白还在后面蜗牛般爬行,这不,在mac终端安装第三方模块就成了一道拦路门槛 ...
Vue学习（三）—— vue脚手架
文章目录第三部分使用vue脚手架一.介绍及安装 1.概述 2.安装步骤 3.备注 4.模板项目结构 5.关键代码 5.1 index.html 5.2 main.js 5.3 App.vue 5 ...
ROS学习（三）：ROS安装不能本地化问题
ROS 安装命令: sudo apt-get install ros-indigo-desktop-full 经常出现问题: E: Unable to locate package ros-indig ...
Hololens学习（三）打包编译安装HoloLens2应用
1.导入剩余3个安装包Tools,Extensions,Exampl 2. 3.出现 4. 就可以运行进行操作了 5.文件导入build setting 6.创建文件夹命名为点击进去--选择文件夹- ...
转载 PCIe学习（三）：PCIe DMA关键模块分析之二
版权声明:本文为CSDN博主「CLGo」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/cllovexyh/a ...
七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用（安装，拉取2.x模板，初始化项目），Vue cli2详解，Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...
VUE项目学习（三）：win10版nginx部署vue项目
VUE项目学习(三):win10版nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/1 ...
Vue+Electron学习系列 (三) -- 自动更新
Vue+Electron学习系列 1️⃣Vue+Electron学习系列 (一) -- 初识 2️⃣ Vue+Electron学习系列 (二) -- 打包发布 3️⃣ Vu ...
Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）
Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程(超详细) 目录一.安装Node(npm)需要的环境和版本发布信息 (1).Node版本和npm版本关系 (2).支持 ...

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

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

最新文章

热门文章