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

关注

已于 2022-03-11 09:13:25 修改 · 8.8k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

IDEA下从零开始的vue项目的创建及运行一.相关知识及准备概念： vue：是一套框架，用于构建用户界面的渐进式框架。 vue-cli：而vue-cli 是一个基于 Vue.js进行快速开发的完整系统。区别： vue是一整套框架，而vue-cli只是它其中的一个脚手架 node.js:搭建Vue的环境工具,（javascript运行时），以及使用里面的npm命令安装vue项目所需的依赖包。联系： vue-cli 是vue的命令行工具 vue-cli是一个完整的vue项目核心构成话不多说，先安装node.js环境。此处应有链接…! 阅读详情

一、安装和配置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开发

标签

#vue.js #intellij-idea #前端

（一）vue开发环境配置及idea集成vue 以前的工作主要侧重后端的业务逻辑开发，再加上对css,js莫名的不喜欢。所以很少去接触，以前买了本node.js，看起来也是不知道如何下手。今天从搭建项目到正式部署到服务器，整个流程走了一遍，感觉一下子变得通透了很多。目录 vue开发环境搭建项目创建运行命令 IntelliJ IDEA配置VUE开发环境项目导入idea 项目发布 vue开发环境搭建安装no... 阅读详情