1. 程式人生 > >node學習記三之vue與安裝的模組(d3\echarts\jquery)

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)

開發的專案並不是一個完整的專案,而僅僅是一個展示資料資訊的一個個圖表的單頁面應用,類似於大屏的效果,當然技術很low.也是在學習vue 中的第一個應用,算是探索在專案中如何使用vue 來開發。先來寫下安裝 vue、echarts、jquery、d3需要的npm 指令及遇到的

Node學習基礎() 檔案的同步和非同步寫入操作(fs_檔案系統)

下面遇到看不懂的可以去看官方文件。 首先引入fs模組 第二步開啟檔案  官方文件格式是這樣  path 檔案路徑  這裡例子裡是FileHello.txt  如果沒有這個檔案 所以他會自動建立 FileHello.txt

Meteor學習路程(一)簡介安裝

一、Meteor是什麼? Meteor是一個構建在Node.js之平臺,用於開發讓網頁能夠實時和響應的程式。Meteor位於程式資料庫和使用者介面之間,儲存二者之間的資料同步更新。 二、為何使用Meteor? 易於學習,上手快 三、安裝Meteor(我主要是Windows安裝的哦

Mybatis學習總結簡化sql對映xml檔案中的引用及解決欄位名實體類屬性名不相同的衝突

一、為實體類定義別名,簡化sql對映xml檔案中的引用 我們在sql對映xml檔案中的引用實體類時,需要寫上實體類的全類名(包名+類名),如下:parameterType="com.aiit.pojo.User"這裡寫的實體類User的全類名com.aiit.pojo.User, <i

Spring Cloud學習筆記()——服務發現消費使用Ribbon

服務消費一般使用ribbon和feign兩種方式。而feign實際上也是以ribbon為基礎的。有多個服務提供者例項的情況下ribbon可以實現負載均衡。 1.pom檔案:這裡與服務提供者不同的是需要引入ribbon包。 <dependency>

Vue.js基礎學習、Class Style 繫結)

Class 與 Style 繫結 Class 與 Style 繫結 1.建立一個 Vue 例項 1.1 物件語法 1.2 陣列語法 1.3 用在元件上 2.繫結內聯樣式 2.1

vue學習筆記():vue-cli腳手架搭建

node log ins 版本 返回 ges 技術分享 安裝webpack webp 一:安裝vue-cli腳手架: 1:為了確保你的node版本在4.*以上,輸入 node -v 查看本機node版本,低於4請更新。 2:輸入: npm install -g vue-c

Excel課程學習課排序替換

分享圖片 選中 表格 技術分享 定位 自定義 復制 可見 方向 一、排序 1、簡單排序 點到某一個單元格,然後選擇排序,就可以按照相應的順序來排序。 2、自定義排序 按照重要性條件來排序 也可以按照重要性從輕到重挨個排序。 3、按顏色排序 4、 按照中文數字排序,按照自

docker學習) Windows 10 安裝Docker

body 圖標 hyper com app try href windows 必須 Docker CE: 社區版,免費。 Docker EE: 企業版,收費。 安裝: Windows 10 Pro 64, 必須開啟Hyper-v

ROSArduino學習)訂閱發布

CP HA hat true subscribe href 串口 chat ria ROS與Arduino學習(二)訂閱與發布 Tutorial Level:HelloWorld Next Tutorial: 本節介紹如何在arduino中發布與訂閱消息。他和ROS通過串口

Chef學習筆記(一)--基礎知識安裝配置

Chef 概念 安裝 配置 示例 通常Chef由三部分組成:Workstation、Chef Server、Chef Node。 Workstation是進行日常工作的機器,需安裝Chef Development Kit,用來編寫cookbooks,管理Chef Server和Node。

linux RedHat7LNMP構架搭建論壇源碼安裝PHP和Discuz論壇

line 搭建 opcache com kconfig upload libmcrypt default ast PHP安裝#cd ..#tar zxvf yasm-1.2.0.tar.gz#cd yasm-1.2.0#./configure#make#make insta

Kettle學習筆記002轉換作業

1 .  Kettle的任務設計器Spoon   答:windows平臺執行Spoon.bat檔案,啟動Kettle。注意,啟動速度緩慢,需要等待,不要多次雙擊。   2. Kettle的兩種流程: 答:轉換流程和作業流程 a. 新建轉換快

Kettle學習筆記005引數變數

1. 啟動作業或者轉換時初始化的叫做引數 。在 呼叫作業或者轉換的時候傳入。 2. 作業或者轉換執行過程中數值會變動的某些資料,叫做變數。在流程內部配置。 3. 引數的配置與使用      a. 引數配置位置:  轉換設定  -

JSP學習筆記response物件和request物件

接著上一篇,我們接著講JSP中的內建隱式物件。這篇部落格介紹的是request和response物件。 A. request物件      request物件是javax.servlet.http.HttpServletReq

Linux學習)使用者使用者組

一、使用者賬號與使用者組的建立 1.使用者與使用者組的概念 Linux是一個多使用者、多工的伺服器作業系統。 通過 許可權的劃分 來實現。 (1)Linux使用者分為3鍾角色: 超級使用者:預設root。 普通使用者:只能對自己目錄下的檔案進行訪問和修改。 虛擬(偽)使用

Node學習基礎(四)檔案的流操作以及pipe管道簡單舉例

 舉例說明: // 1.引入模組 let fs =require('fs'); //2.建立讀入流 let rs = fs.createReadStream('D:/Pictures/Saved Pictures/testSP.mp4'); //要讀取視訊的位置 let ws

Node學習基礎(一) 瞭解nodejs

1. Node.js是什麼? node.js是用於開發伺服器,做資料API,設計路由...等 和前端的主要區別在於:前端主要負責效果和互動 2.Node.js是追求極致的產物 I,是單執行緒!!! 什麼是程序? 當一個程式開始執行時,它就是一個程序,程序包括執行中的程式和程式

vue入門vue-cli安裝專案

第一步先安裝nmp   在node.js的官網下載即可。 第二步 直接安裝剛下載好的node.js即可,(這裡建議不要修改node.js的安裝路徑),傻瓜式直接下一步即可 檢測是否安裝成功:   在cmd的控制檯直接輸入node -v 如果出現這樣的介面恭喜你node.js安裝成功 (利用 win + r

Zookeeper學習筆記五監控通知

監控與通知 Zookeeper通常以遠端服務的方式被訪問,如果每次訪問znode時,客戶端都需要獲得節點中的內容。這樣的代價就非常大。因為這樣會導致更高的延遲,而且Zookeeper需要做更多的操作,例如下圖中,第二次呼叫getChildren /tasks返回了相同的值,