一、安装和配置node.js

1.1 下载安装node.js

Nodejs的官方网站下载地址：Download | Node.js

Node.js会同步安装npm，安装完成后，启动cmd测试下是否安装成功。

输入命令行：node -v 和 npm -v分别查看版本

1.2配置npm默认安装路径和缓存路径

（1）创建文件夹

在执行npm install 全局安装命令时，会默认安装到【C:\Users\用户名\AppData\Roaming\npm】中，可以改变默认安装路径，比如改变到node.js的安装目录下。在【C:\Program Files\nodejs】下创建NodeGlobal和NodeCache两个文件夹，分别存放安装文件和安装缓存文件。

（2）执行配置命令

启动cmd，执行以下两条命令：

npm config set prefix "C:\Program Files\nodejs\NodeGlobal"

npm config set cache "C:\Program Files\nodejs\NodeCache"

npm config get prefix 查看默认安装路径；

npm config get cache 查看默认缓存路径。

1.3环境变量配置

鼠标指向“我的电脑”，右键，“属性”-“高级系统设置”-“高级”-“环境变量”。

在“系统变量”,找到“Path”后点击“编辑”-新建，输入node的安装路径【C:\Program Files\nodejs\】
在在“系统变量”，新建NODE_PATH，输入【C:\Program Files\nodejs\NodeGlobal\node_modules】
在用户变量下的Path里添加【C:\Program Files\nodejs\NodeGlobal】和【C:\Program Files\nodejs\NodeCache】

1.4 配置npm默认的下载源

npm在执行安装命令时，会从源网站下载模块，默认是https://registry.npmjs.org/，改成国内淘宝镜像源，下载速度更快。

启动cmd，执行命令：npm config set registry https://registry.npm.taobao.org

执行命令npm config get registry 查看是否配置成功

二、安装和配置VUE

2.1 安装vue.js

执行命令npm install vue -g

-g是全局安装命令，将安装到步骤1.2配置的安装路径【C:\Program Files\nodejs\NodeGlobal】

执行命令npm list vue 查看是否安装成功

2.2 安装webpack

在cmd中执行webpack安装命令：npm install webpack -g；

在cmd中执行webpack-cli安装命令：npm install --global webpack-cli；

在cmd中执行查看webpack版本命令：webpack -v。

2.3 安装vue-cli

在cmd中执行vue-cli安装命令：npm install vue-cli -g

在cmd中执行router安装命令：npm install -g vue-router

在cmd中执行查看版本命令：vue -v

2.4 配置环境变量

在“系统变量”,找到“Path”后点击“编辑”-新建，输入vue.cmd的安装路径【C:\Program Files\nodejs\NodeGlobal\】（执行vue命令创建项目时如果提示不是有效命令，即是因为vue.cmd路径没配置到环境变量中）

三、创建vue工程项目

3.1 创建工程

（1）创建工程的存放路径，比如E:\Projects\Vue,启动cmd，执行cd命令进入路径【E:\Projects\Vue】（如果不指定路径，会默认创建到【C:\Users\Administrator\】下）

（2）执行命令：vue init webpack myproject，【myproject】是你的工程名称，不能使用中文和大写字母。

执行成功后会出来配置选项：

Project name: 回车确认

Project description：项目介绍，可不填写，回车确认

Author：输入作者姓名后回车

Vue build：询问编译打包的方式，有runtime-compiler、 runtime-only两种选择，上下键选择runtime-only后回车；

Install vue-router：询问是否安装 vue-router，输入y后回车；

Use ESLint to lint your code ：询问是否使用ESLint检测代码错误，输入n后回车；

Set up unit tests：询问是否配置单元测试工具，输入n后回车；

Setup e2e tests with Nightwatch：询问是否需要端到端测试工具Nightwatch，输入n后回车；

Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)：询问安装依赖npm install，直接回车确认。

之后开始执行安装依赖包，最后会提示：Project initialization finished!

3.2 启动运行vue工程示例

cmd 在工程路径下，执行命令：npm run dev

按照提示打开网页输入【http://localhost:8080】，显示网页如下则创建成功：

要结束vue工程运行可输入Ctrl+C，选择y

四、VUE工程目录

打开刚才创建的工程【E:\Projects\Vue\myproject】目录，会发现初始了一堆文件夹和文件，掌握这些目录和文件的用途对项目开发也很有必要：

4.1 build（webpack开发和打包配置目录）

1）build.js ：构建环境配置；

2）check-versions.js ：npm和node.js的版本检查；

3）utils.js ：配置静态资源路径；

4）vue-loader.conf.js ：CSS加载器配置；

5）webpack.base.conf.js ：webpack编译入口、输出路径等基本配置；

6）webpack.dev.conf.js ： webpack开发环境配置文件；

7）webpack.prod.conf.js ：webpack生产环境配置文件；

4.2 config（项目配置目录）

1）dev.env.js ：开发环境变量文件；

2）index.js ：项目配置文件；

3）prod.env.js ：生产环境变量文件；

4.3 node_modules（npm 加载的项目依赖模块）

4.4 src （项目源文件目录）

1）assets：资源目录，放置公用的js、css或者ogo图片；

2）components：自定义组件的存放目录；

3）router：前端路由目录，需要配置的路由路径写在index.js里面；

4）App.vue：Vue 应用的根节点组件；

5）main.js：应用的入口文件，文件中引入vue框架，创建vue实例并挂载index.html的HTML元素。

4.5、static （图片、字体等静态资源目录）

4.6、test（初始测试目录，可删除）

4.7、根目录

1）index.html：首页入口文件，VUE应用通过index.html加载运行

2）package.json：npm脚本、依赖包等配置信息

3）README.md：项目说明文档，markdown 格式

4）.babelrc:babel：编译参数

5）.editorconfig：:编辑器配置，代码格式

6）.eslintignore : 配置需要忽略的路径，一般build、config、dist、test等目录都会配置忽略

7）.eslintrc.js : 配置代码格式风格检查规则

8）.gitignore:git上传需要忽略的文件配置

9）.postcssrc.js ：css转换工具

10）package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

11）README.md：项目的说明文档，markdown 格式

五、IntelliJ IDEA开发工具安装和配置

IntelliJ IDEA，是JetBrains公司提供的JAVA开发集成环境，业界公认最优秀的JAVA开发工具之一。安装IDEA之前，需要先安装JDK环境。

5.1 JDK安装

JDK官网下载地址：

Java Downloads | Oracle

完成JDK后需配置相应环境变量，可自行百度。

5.2 IntelliJ IDEA安装

IntelliJ IDEA官网下载地址：

下载 IntelliJ IDEA：JetBrains 功能强大、符合人体工程学的 Java IDE

UItimate 付费版，主要针对 Web 和企业开发用户，需要有注册码；Community 免费社区版，主要针对Java 初学者。

安装成功后，进入IDEA，help下的Register，输入注册码进行激活。

5.3 安装VUE和node插件

打开IntelliJ IDEA，File-Setting-Plugins，搜索VUE，点击安装；搜索node，点击安装。

六、使用IntelliJ IDEA创建VUE工程

6.1 创建工程

打开IntelliJ IDEA，File-New-Project from Existing Sources，选择步骤3.1创建的VUE工程目录，【E:\Projects\Vue\myproject】，点击“OK”；

导入工程，点Next：

一直点Next即可，出现no framework detected时，点finish，成功。

6.2 配置运行环境

VUE需要用npm来运行，在IntelliJ IDEA右上角Edit Configurations，Add new run confiurations，出现如下界面：

选择npm，在Scripts中输入dev后点击“OK”；

之后点击右上角绿色三角符号，打开网页输入【http://localhost:8080】，VUE项目运行成功，可以继续通过IntelliJ IDEA写代码调试了。

从头搭建VUE环境，使用IDEA 2021创建VUE项目相关推荐

利用rpm包搭建lamp环境及论坛的创建
一．利用rpm包搭建Lamp环境安装过程 1. 安装apche服务 yum install httpd –y 2.安装mysql数据库 yum install mysql mysql-server ...
vue cli 添加html,vue-cli创建的项目,配置多页面的实现方法
vue官方提供的命令行工具vue-cli,能够快速搭建单页应用.默认一个页面入口index.html,那么,如果我们需要多页面该如何配置,实际上也不复杂假设要新建的页面是rule,以下以rule为例 ...
vue实战记录（二）- vue实现购物车功能之创建vue实例
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据作者:狐狸家的鱼本文链接:vue实战-实现购物车功能(二) GitHub:sue ...
vue的使用（引用/创建vue项目）（一）
在程序开发中,有三种方式创建vue项目,本地引入vuejs.使用cdn引入vuejs.使用vue-cli创建vue项目.其中vue-cli可以结合webpack打包工具使用,大大方便了开发步骤,使用广 ...
第2章搭建CRM项目开发环境（搭建开发环境）
2.2搭建开发环境 2.2.1创建crm项目使用IDEA创建Empty Project,作为项目的工作空间 2.2.2创建crm模块创建maven类型的模块,作为开发工程 2.2.3为项目添加me ...
win10安装和搭建vue环境（超详细教程）Vue新手教程(1)：
PS:笔者为计科专业研一在读,最近打算学习Vue,踩了许多坑,在此将学习过程分享出来,后续还会持续更新. 一.安装Vue环境首先,在安装Vue环境之前,我们首先需要安装npm这个玩意. 那么npm这 ...
使用node环境创建vue项目
检查node的环境以管理员的身份运行cmd 1.输入:node -v 2.检查npm 的版本号 npm -v 注意顺序不要错,不然会很麻烦安装cnpm 3. npm install -g cnpm ...
vue项目结构php写哪里,Vue项目的创建,以及项目目录结构的分析
Vue项目环境搭建""" node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源 ...
Mac系统配置vue环境出现的权限问题解决方法
vue环境具体配置及创建项目的教程详见月泰的博客或者通过苹果终端命令来进行安装: 安装node.js: /usr/bin/ruby -e "$(curl -fsSL https://raw ...

从头搭建VUE环境，使用IDEA 2021创建VUE项目