vue开发环境配置及idea集成vue

以前的工作主要侧重后端的业务逻辑开发，再加上对css,js莫名的不喜欢。所以很少去接触，以前买了本node.js，看起来也是不知道如何下手。今天从搭建项目到正式部署到服务器，整个流程走了一遍，感觉一下子变得通透了很多。

目录

 vue开发环境搭建

项目创建运行命令

IntelliJ IDEA配置VUE开发环境

项目导入idea

项目发布

---

 vue开发环境搭建

1. 安装node.js：https://nodejs.org/en/，选择对应的版本下载安装即可。
   
   安装成功后查看版本确认下是否安装成功：
   
2. webpack的安装
   由于vue-cli是基于webpack的，所以我们要在安装一下webpack，命令行输入： npm install webpack -g 
   之后命令行输入：cnpm install vue-cli -g全局下安装
3. 安装手脚架vue-cli

   安装访问外网会比较慢，所以这里建议下载淘宝镜像，命令行输入：npm install -g cnpm --registry=https://registry.npm.taobao.org。
   之后命令行输入：cnpm install vue-cli -g全局下安装。

注意：在安装过程可能会存在一些警告，是一些版本的问题，可以略过不计

 

项目创建运行命令

1. 创建项目 vue init webpack vuecmp
   说明：会在执行命令的目录下直接创建项目

2. 安装依赖包 cnpm install

3. 运行项目 cnpm run dev/cnpm start
   

4. 打包项目 cnpm run build

IntelliJ IDEA配置VUE开发环境

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

1. 安装插件
2. 配置js版本
   
3. 添加HTML的格式
   

项目导入idea

1. 导入项目
   
2. 设置运行/打包命令
   
   
   

项目发布

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

一知半解

1. 在以前的认知里，只有Java代码编译变成了class文件，前端的代码直接复制到服务器就可以访问的，并没有进行编译，为什么VUE还要编译呢？
   目前大概理解：缩小文件大小，加密
2. 手脚架是什么鬼？
   目前理解：就是快速搭建项目框架的东东