VUE项目搭建以及插件引用

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(遗失包名)下载即可



 

你可能感兴趣的:(VUE项目搭建以及插件引用)