手把手教程-使用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的安装与问题后面文章再发。欢迎评论与指导。

        总结:小编写完这篇稿子太难受了,因为查资料、问别人真的好累,好费时间,小编在这里真心求一个点赞和关注,你的认可就是我最大的动力啊。

  • 70
    点赞
  • 116
    收藏
    觉得还不错? 一键收藏
  • 18
    评论
评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值