手把手教程-使用idea创建vue项目
简介:小编在第一次通过IDEA使用Vue创建脚手架时,对于网上那么多方法真实头大,在经过多次的测试后,终于有一种简单直接的方法,费话不多说,上操作方法和相应的截图。
一、安装Node.js
首先要安装好Node.js,安装包可以自行去Node.js官网下载,也可以去我的网盘下载(下载地址),这里以我提供的安装包为例。
1. 双击安装包,打开,按照下图所示进行操作。
2. 继续如下图所示
3. 这一步是选择安装目录(读者可以自己定义下载目录)
4. 这里小编是安装在了E盘。
5. 安装完成后,确认是否安装成功。这里打开电脑的命令控制行(快捷方式,按住键盘上的win + R),输入以下命令 node -v 结果如下图所示表示成功。
6. Node.js安装完成,npm也就安装上了,可以用命令:npm --v 查看npm的版本。
二、安装vue-cli
1、使用npm(需要安装node环境)全局安装webpack,打开命令行工具输入:npm install -g cnpm --registry=https://registry.npm.taobao.org 安装淘宝镜像,安装完成之后如下图,则说明安装成功
2、全局安装vue-cli,在cmd中输入命令: npm install -g @vue/cli ,安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。
3、然后分别输入vue -V(这是大写的V) node -v 和 npm -v 查看相应的版本号。出现下图表示成功。
三、用vue-cli来构建项目
1、首先在D盘新建一个文件夹(vuetest)作为项目存放地,然后使用命令行cd进入到项目目录输入:vue create xxxx 创建vue项目(xxxx是你的项目名称,自定义),出现下图表示成功。
2、然后进入下面的选择,Enter是确认选择,上下键是换选择,第二页的*是用空格来取消标记(图中蓝色是小编的选择,请读者按照我的操作来进行)
01、选择第三项: Manually select features
02、选择 Babel 、Router
03、选择:2.x
04、输入Y
05、选择: In package.json
06、输入:N
07、出现如下结果表示成功。(这里要经过漫长的等待项目加载配置文件,成功后会出现如下界面)
08、成功后重新打开命令输入框输入 cd 进入项目名称里, 这里我的项目名称为myproject,进入后输入:npm run serve 如果显示运行失败,那就重复执行 npm run serve 一直到如下界面出现。
09、在浏览器中输入图片中的域名,就能看到如下页面了。
四、使用IDEA打开项目
1、打开idea,用idea打开我们刚才创建的vue项目
2、点击左上角的file,再点击settings,然后选择plugins在搜索款搜Vue.js进行安装应用。
到此安装,使用成功,更多vue的安装与问题后面文章再发。欢迎评论与指导。
总结:小编写完这篇稿子太难受了,因为查资料、问别人真的好累,好费时间,小编在这里真心求一个点赞和关注,你的认可就是我最大的动力啊。
更多推荐
所有评论(0)