简介:小编在第一次通过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的安装与问题后面文章再发。欢迎评论与指导。

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

GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 5 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐