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:这个是代码警告提示这个很烦人的建议最好不要

vue项目ide(vue项目环境搭建)_第1张图片

安装后的项目目录

vue项目ide(vue项目环境搭建)_第2张图片

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

vue项目ide(vue项目环境搭建)_第3张图片

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

vue项目ide(vue项目环境搭建)_第4张图片

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

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

  

  外部js引入可以这样写:

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

vue项目ide(vue项目环境搭建)_第5张图片

打包项目 cnpm run build

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

安装插件

配置js版本

添加HTML的格式

项目导入idea
导入项目

设置运行/打包命令

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

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

你可能感兴趣的:(Vue.js,node.js)