IDEA搭建Vue项目

您所在的位置:网站首页 idea怎么配置vue IDEA搭建Vue项目

IDEA搭建Vue项目

2023-03-11 12:06| 来源: 网络整理| 查看: 265

 

简介:

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项目就搭建完成了



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3