vue项目ide（vue项目环境搭建）

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

项目：ide可视化工具

技术应用：

　　Vue2.0（js框架）：Vue.js - 渐进式 JavaScript 框架 | Vue.js

　　ElementUi（饿了吗ui框架基于vue的）：Element - The world's most popular Vue UI framework

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

　　vue-power-drag（仿grister的vue拖拽插件）：vue-power-drag

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

二、项目环境搭建

　　vue环境配置：

　　首先安装node：Node.js 安装配置 | 菜鸟教程

卸载旧cnpm:   npm uninstall -g cnpm --registry=https://registry.npm.taobao.org
　　1、安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org

2.安装cnpm命令：  sudo find / -name cnpm

先查到cnpm位置，在 /opt/node-v11.4.0-linux-x64/lib/node_modules/cnpm/bin/cnpm

3创建软链接  sudo ln -s /opt/node-v11.4.0-linux-x64/lib/node_modules/cnpm/bin/cnpm /usr/local/bin/cnpm

    　　注：下面的npm可换成cnpm下载快
　　2、安装webpack：npm install webpack -g
　　3、安装vue2脚手架：npm install vue-cli -g  （安装vue3命令：npm install -g @vue/cli）

linux系统下都需要创建软链接：sudo ln -s /usr/local/node-v16.18.1-linux-x64/lib/node_modules/vue-cli/bin/vue /usr/local/bin/vue
　　4、cd 目录
　　5、创建项目：vue init webpack 工程名      (vue3创建命令：vue create myproject)

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

安装后的项目目录

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配置：

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

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

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

　　<style>
   　　 @import url("assets/css/common.css");
　　</style>

　　外部js引入可以这样写：

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

打包项目 cnpm run build

IntelliJ IDEA配置VUE开发环境
       上面的几个步骤就已经可以完成vue项目的开发和打包一系列的操作了，方便开发我们一般会使用相关的idea进行开发。我习惯使用intellij idea开发。下面就讲下其配置的几个地方。

安装插件

配置js版本

添加HTML的格式

项目导入idea
导入项目

设置运行/打包命令

项目发布
build成功后会生成dist这个文件夹，就是打包后的dist。直接将这个文件夹放到服务器下就可以进行访问了

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