IDEA搭建Vue项目

2024-05-09 03:19:46

简介：

Vue.js是前端一个比较火的MVVM框架，是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

Vue在使用的时候需要有NodeJS环境的支持，首先要下载安装NodeJS

一、下载并安装nodejs，下载地址是 https://nodejs.org/zh-cn/do0wnload/

NodeJS安装的过程中将会自动添加PATH环境，所以不需要重新进行环境配置

安装完成之后可以使用node -v命令进行查看版本

二、安装vue脚手架工具

安装方式：

第一种：使用npm，比较适合比较大型的应用，由于npm是国外的，使用起来比较慢；

第二种：使用淘宝的cnpm镜像来安装vue；

1、打开cmd，输入命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装Vue需要npm的版本大于3，所以我们先升级一下npm，输入命令

cnpm install cnpm -g

这个安装的是2.x的版本

npm i -g vue-cli

这个安装的是3.x的版本

npm install -g @vue/cli
测试是否安装成功：V是大写的
vue -V

三、idea创建vue项目

1、先安装vue.js插件(快捷键CTRL+SHIFT+S：Plugins，搜索Vue安装)

2、然后选择创建项目（低版本的IDEA应该是static Web）

注意：name不能写大写字母，一律写小写

3、这样就会自动构建vue项目了

4、如果构建失败的话，应该是打包工具（webpack和webpack-cli）没有安装

安装webpack

npm install --save-dev webpack

安装webpack-cli

npm install --save-dev webpack-cli
# 不要忘记webpack4.+开始webpack-cli是必备的哦

5、查看安装版本

6、初始化Vue项目

等加载完之后，Vue项目就创建完成了

7、启动测试

这样第一个Vue项目就搭建完成了

IDEA搭建Vue项目相关推荐

Vue-CLI + Webpack 搭建 Vue 项目最全分析
一.vue-cli介绍 vue-cli是一个用于快速搭建vue项目的脚手架. 二.vue-cli安装.更新安装过nodeJs .cnpm 后,全局安装vue-cli(以后其他项目可直接使用): c ...
MAC电脑使用vue-cli脚手架搭建vue项目；mac使用脚手架vue-cli搭建vue项目
windows搭建vue项目看这篇
搭建 vue项目（Windows + 命令行 + vsCode）
1.win键 + R ,输入CMD打开命令行. 2.输入node -v 查看node.js是否安装,如果输出版本号,则进行下一步,否则安装node.js. 下载地址:https://nodejs.or ...
搭建vue项目环境以及创建一个简单的vue的demo
一.vue-cli脚手架的搭建步骤 1.首先,确定你的电脑上已经安装了nodejs,可以使用npm包管理器安装环境,如果还没有安装node环境,则需要安装node.js 这个很简单默认点击安装 ...
关于搭建Vue项目的顺序及遇到的问题
关于搭建Vue项目的顺序前言:笔者在搭建Vue项目中遇到了许多问题,当最后解决的时候,仍然对这个过程的来龙去脉极为模糊,在这里从最开始搭建nodejs开始到最后Vue项目搭建完成进行一个一条龙的总结 ...
VSCode搭建Vue项目及服务器部署
一.安装nodeJs 在我之前的博客<idea搭建vue-cli项目>里有详细安装教程,这里进入! 二.在VSCode搭建Vue项目 1.安装全局脚手架 npm i -g @vue/cli ...
Vue入门 - 环境搭建Vue项目创建
Vue起步:从零开始搭建一个完整的Vue项目一.安装Node环境 1.下载Node.js安装包并安装 2.环境变量的配置二.搭建vue项目环境一.安装Node环境 1.下载Node.js安装包并 ...
教你如何搭建vue项目
笔者工作也有一些时间,需要用vue写项目时也总是项目组长已经把项目搭建好了, 偶尔心血来潮想试着自己搭建一个vue项目我们搭建vue项目呢主要是用到了vue-cli来搭建,但是前提是必须要已经安装好 ...
从零开始使用webpack 搭建vue项目
从零开始使用webpack 搭建vue项目 1 创建项目 npm init 生成 package.json 创建 index.html webpack.confug.js project-name|- ...
使用veu-cli3/4搭建vue项目详细配置
文章目录使用vue-cli4 搭建vue项目一.安装vue-cli4 二.创建一个vue项目三.预设选项四.启动项目五.可视化UI 使用vue-cli4 搭建vue项目一.安装vue-cl ...

最新文章

热门文章