IDEA中创建启动Vue项目--搭建vue项目

文章目录

环境配置
安装Vue-cli构建工具
构建项目
使用命令启动Vue项目
使用idea启动Vue项目

环境配置

下载安装nodeJs
成功安装国内镜像或者是淘宝的npm镜像
详情见博客：NodeJs的安装和配置

安装Vue-cli构建工具

//老版本
cnpm install -g vue-cli//新版本
npm install -g @vue/cli//安装新版需先卸载旧版本
npm uninstall vue-cli -g

构建项目

首先进入目录地址

使用命令构建项目，初始化一个项目

//旧版本，项目名称为“permission-ui”
vue init webpack permission-ui
//项目名称是 permission-ui，其中webpack是构建工具//新版本
vue create vuetest

初始化的时候会让你选择预设，是直接选择版本还是自己设定

1、选择自己设定需要询问一些问题，根据具体需要来回答就好了。类似以下这种问题。

2、直接选择2或者3版本的，选择2版本会直接自动安装

安装成功之后可以在安装路径里面找到安装好的项目

使用命令启动Vue项目

进入安装路径

I:\Vue>cd vuetest

在项目目录下使用命令安装项目所需要的依赖

cnpm install

使用命令启动项目

npm run serve

见下图：

根据图中的网络路径就可以打开项目了

终止操作：Ctrl+C

使用idea启动Vue项目

前提条件：
1、idea安装好node.js环境和初始化依赖
2、安装好vue.js插件（file-settings-plugins）

打开idea后进行配置

配置后重启idea
启动idea
然后通过路径访问项目

IDEA中创建启动Vue项目--搭建vue项目相关推荐

Vue CLI3搭建的项目中，如何给文件夹起别名?
因为这段大年的时间里,好久没写博客了,是好懒散了.真的是少年易老学难成,一寸光阴不可轻啊.浪费一秒钟是一秒钟的罪过. 我们使用Vue CLI3搭建的项目中,在vue.config.js文件中,在给文件 ...
vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目源码(欢迎star): 前端项目代码后端项目代码系列文章: Vue整合SpringBoot项目实战之后端业务处理 ...
eclipse maven打包jar 部分jsp无法访问_Maven系列教材（九）- 在Eclipse中创建maven风格的java web项目...
Maven系列教材 (九)- 在Eclipse中创建maven风格的java web项目步骤1:删除j2ee目录步骤2:新建Maven 项目步骤3:这个界面点下一步步骤4: 这个界面使用webapp ...
在 IntelliJ IDEA 中创建基本的 Maven 多模块项目
在 IntelliJ IDEA 中创建基本的 Maven 多模块项目笔者的环境: Maven 3.6.3 JDK 11 IntelliJ IDEA 2020.2.2 (Ultimate Editio ...
Win10 Vue 环境搭建以及项目初始化
文章目录 1. Node 下载和安装 1.1 安装验证 1.2 添加 `NODE_PATH` 环境变量 2. 使用 cnpm 的两种方式 2.1 下载安装 cnpm 2.2 通过改变地址来使用淘宝镜像 ...
vue环境搭建与项目配置
安装node.js 安装vue前电脑中必须已经安装成功node.js node.js 下载链接下载完成后,执行安装程序,直接进行安装即可安装完成后,打开命令行窗口(cmd) 输入node -v 和 ...
dajngo3,vue3前端项目搭建,vue项目结构的介绍
前端项目搭建查看当前node版本 [dalaojun@localhost django_luichun]$ node -v v14.15.0 查看npm版本 [dalaojun@localhost ...