VUE项目构建

一、先介绍一下我接下来要做的项目

项目：ide可视化工具

技术应用：

Vue2.0（js框架）：https://cn.vuejs.org/

ElementUi（饿了吗ui框架基于vue的）：http://element.eleme.io/#/zh-CN

Ecahrts（图表）：http://echarts.baidu.com/

vue-power-drag（仿grister的vue拖拽插件）：https://xiongcaihu.github.io/#/

项目介绍：ide要实现的是供企业或者个人编辑可视化图表，适应不同分辨率的屏幕，配置的基本默认样式达到客户要求，项目模块分为仪表盘、工作表、数据源、编辑图表等。

二、项目环境搭建

vue环境配置：

首先安装node：http://www.runoob.com/nodejs/nodejs-install-setup.html
　　1、安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org
　　注：下面的npm可换成cnpm下载快
　　2、安装webpack：npm install webpack -g
　　3、安装vue脚手架：npm install vue-cli -g
　　4、cd 目录
　　5、创建项目：vue init webpack 工程名

Use ESLint to lint your code：这个是代码警告提示这个很烦人的建议最好不要

image

安装后的项目目录

image

6、安装项目依赖：npm install
　　7、安装 vue 路由模块vue-router和网络请求模块vue-resource：cnpm install vue-router vue-resource --save
　　8、安装elementui：npm install element-ui --save
　　9、安装vue的gridster：npm install vue-power-drag
　　10、安装echarts：npm install echarts -S

11、安装axios惊醒HTTP请求：npm install axios
　　12、启动项目：npm run dev

main.js配置：

image

注：echarts和axios不能像element一样用use全局使用，只能放在Vue原型上。

image

这个目录下static文件可以放外链js，assets文件放置图片还有css文件

外部css文件引入可以这样写：

外部js引入可以这样写：

import {getOption,getOption2} from '../../../static/js/js.js'

js文件加导出：

image

总结：项目的技术选型还有环境搭建基本完成可以步入开发了

项目刚开始启动我后面也会针对项目开发所遇到的问题进行总结