IDEA中Vue的安装和使用(最全篇)

https://blog.csdn.net/CCIEJohn_zhou/article/details/89043500?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

一.准备工作

    Vue是前端开发框架。搭建框架,首先要搭建环境。搭建Vue的环境工具:node.js(JavaScript的运行环境),然后再用nodejs里面的npm(包管理和分发工具)来安装依赖包。

二.安装node.js

    下载地址:https://nodejs.org/zh-cn/

     最好下载稳定版本:下载完之后(安装程序可以直接next step)

三.检查是否安装成功

打开CMD 输出下图代码,会显示版本信息。

四.打开IDEA准备创建项目

1.打开IDEA创建一个 Static Web 项目

2.打开Terminal

五.正式创建项目

1.首先安装npm的阿里镜像,原生npm下载依赖包过慢,镜像可以提高下载效率。

输入指令:输入后等待安装完成

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


2.安装Vue的脚手架工具vue-cli

npm i -g vue-cli
测试是否安装成功:
vue -V    //注意:-V是大写的V,不是小写的v
安装中......

安装成功:

最后还剩下一个webpack工具(如果以前没有安装webpack,一定要安装!!!)

cnpm install -g webpack
npm install webpack-cli -g
webpack -v


六.基本工具安装完成后,开始创建项目

指令:vue init webpack 项目名


基本安装回答可以照着我的输出:放心不坑人,只排坑。

然后就是漫长的等待了。。。。。。

创建成功的项目的目录结构:

七.这里可还没有完,我们还少一个文件夹:nodo_modules,这个文件夹是整个项目依赖包的文件夹。

1.第一步:cd demo222进入demo222的项目(必须进入项目里才能安装啊!!)

2.第二步:cnpm install (此处可以用cnpm代替npm,因为安装了阿里的镜像)

//给大家排一个小坑,你安装了镜像后,有可能npm install可能会安装依赖包失败,所以最好用cnpm

.....等待中....

安装完依赖包的项目结构:

八.查看IDEA的Static Web里的Vue项目

九.惊喜的时刻:运行Vue项目

--运行Vue项目
cnpm run dev


运行成功展示:htttp://localhost:8080

十.下一步就是配置好IDEA的Vue环境了(配置好了,才能编写代码!)。加油!!

1.在setting中的plugins安装Vue.js插件(本人已经安装)

2.配置HTML支持.vue后缀的文件。

3.配置ECMAScript6

这里基本算是完了。恭喜你搭建成功!!!!

拓展:当然一般新手其实是在html页面上直接导入vue.js文件来写vue代码

楼主就稍稍拓展一下:

--npm ERR! code ELIFECYCLE 
原因是因为你的node_modules有意外改动,导致依赖库不完整。
删除项目下的node_modules,
在你的项目目录下,重新执行npm install,这会重新生成node_modules,
执行npm run build ,
npm run dev.

发布了77 篇原创文章 · 获赞 182 · 访问量 58万+

猜你喜欢

转载自blog.csdn.net/hellojoy/article/details/105272190