VUE项目搭建以及插件引用
Windows:
A.准备工作
1. 下载安装Node.js
下载地址:https://nodejs.org/en/download/ ,选择合适自己的版本下载即可。
具体怎么安装Node.js就不用具体说明了,安装Node.js会默认安装npm(包管理工具)。
2. 安装cnpm
npm是Node.js提供的包管理工具,因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,我们可以用淘宝 npm 镜像cnpm代替默认的 npm。
3. 安装vue-cli
使用cnpm或者npm全局安装vue-cli,在cmd中输入一下命令(“-g”这个参数意思是全局安装)
cnpm install –g vue-cli或者npm install –g vue-cli
B.项目搭建
Vue init webpack zhongan_demo(按提示填写相关要安装的模块)
C.安装依赖
1.切换目录 cd zhongan_demo
2.安装模块 cnpm install (npm install)
D.运行zhongan_demo
输入命令:npm run dev
在浏览器输入地址http://localhost:8080,显示如下页面,则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 添加内容
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引入相应文件)
H.引入E-charts图表插件
1. npm install echarts –S
2.main.js引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;
I.eventSource长连接
下载:npm install event-source-polyfil 以及 npm install babel-polyfill
引用:main.js:
相关vue页面调用:
import { EventSourcePolyfill } from"event-source-polyfill"
注意:带上头部token 同时关闭eventSource可采用close()方法
Linux:
A.准备工作
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.①配置环境变量:vim .bash_profile
#往 .bash_profile 新增环境变量
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命令变为全局:ln -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.注意:前端文件存在移动或者其他大变动更改操作时,运行./update.sh报错,建议先删除node_modules文件夹,重新下载npm install。下载结束再执行./update.sh,若报相关包或者插件遗失错误时,npm install xxx(遗失包名)下载即可