VUE項(xiàng)目搭建以及插件引用
Windows:
A.準(zhǔn)備工作
1. 下載安裝Node.js
下載地址:https://nodejs.org/en/download/ 草雕,選擇合適自己的版本下載即可。
具體怎么安裝Node.js就不用具體說(shuō)明了吧兔,安裝Node.js會(huì)默認(rèn)安裝npm(包管理工具)呢袱。
2.? 安裝cnpm
??npm是Node.js提供的包管理工具瓢姻,因?yàn)閚pm安裝插件是從國(guó)外服務(wù)器下載,受網(wǎng)絡(luò)影響大延塑,可能出現(xiàn)異常绣张,我們可以用淘寶 npm 鏡像cnpm代替默認(rèn)的 npm。
3.? 安裝vue-cli
?使用cnpm或者npm全局安裝vue-cli,在cmd中輸入一下命令(“-g”這個(gè)參數(shù)意思是全局安裝)??
cnpm install –g vue-cli或者npm install –g vue-cli
?
B.項(xiàng)目搭建
Vue init webpack zhongan_demo(按提示填寫(xiě)相關(guān)要安裝的模塊)
C.安裝依賴(lài)
1.切換目錄? cd? zhongan_demo
2.安裝模塊? cnpm? install (npm?install)
D.運(yùn)行zhongan_demo
輸入命令:npm run dev
在瀏覽器輸入地址http://localhost:8080页畦,顯示如下頁(yè)面胖替,則vue搭建成功
E.安裝element-UI插件
1.cnpm i element-ui --save
2.在main.js中引入elementUI
F.引入Jquery
1. npm install jquery --save-dev
2. 在webpack.base.config.js 添加內(nèi)容
var webpack =require("webpack")
plugins: [
newwebpack.optimize.CommonsChunkPlugin('common.js'),
?newwebpack.ProvidePlugin({
??? jQuery:"jquery",
??? $:"jquery"
?})
? ]
4.? ?man.is引入import $ from 'jquery'
G.引入bootstrap框架
1. npm install bootstrap --save-dev
2.main.js引入
? import'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
(或者引入bootstrap包,在main.js引入相應(yīng)文件)
H.引入E-charts圖表插件
1. npm install echarts –S
2.main.js引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;
I.eventSource長(zhǎng)連接
下載:npm install event-source-polyfil? 以及? ?npm install babel-polyfill
引用:main.js:
相關(guān)vue頁(yè)面調(diào)用:
import { EventSourcePolyfill } from"event-source-polyfill"
注意:帶上頭部token???? 同時(shí)關(guān)閉eventSource可采用close()方法
Linux:
A.準(zhǔn)備工作
1.下載安裝Node.js
? a.下載壓縮包wgethttps://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-x64.tar.xz
? b.解壓tar -xvf node-v10.15.3-linux-x64.tar.xz
? c.①配置環(huán)境變量:vim .bash_profile
??????????????????? #往 .bash_profile 新增環(huán)境變量
export NODE_HOME=/node-v10.15.3-linux-x64
export PATH=$PATH:$NODE_HOME/bin
exportNODE_PATH=$NODE_HOME/lib/node_modules
保存.bash_profile文件?? :wq
提交????????????? ????source .bash_profile
??? ②改名:mv?node-v10.15.3-linux-x64? nodejs
?????將node,npm命令變?yōu)槿郑簂n -s /XXX/XXX/nodejs/bin/npm /usr/local/bin/
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ln -s /XXX/XXX/nodejs/bin/node /usr/local/bin/
????? d.檢查是否安裝成功:node –v?npm –v
2.注意:前端文件存在移動(dòng)或者其他大變動(dòng)更改操作時(shí)豫缨,運(yùn)行./update.sh報(bào)錯(cuò)独令,建議先刪除node_modules文件夾,重新下載npm install好芭。下載結(jié)束再執(zhí)行./update.sh燃箭,若報(bào)相關(guān)包或者插件遺失錯(cuò)誤時(shí),npm install xxx(遺失包名)下載即可
?