IDEA下从零开始的vue项目的创建及运行

得意时要看淡,失意时要看开。不论得意失意,切莫大意;不论成功失败,切莫止步。志得意满时,需要的是淡然,给自己留一条退路;失意落魄时,需要的是泰然,给自己觅一条出路IDEA下从零开始的vue项目的创建及运行,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

一.相关知识及准备

概念:

  • vue:是一套框架,用于构建用户界面的渐进式框架。
  • vue-cli: 而vue-cli 是一个基于 Vue.js进行快速开发的完整系统。
    区别:
    vue是一整套框架,而vue-cli只是它其中的一个脚手架
  • node.js:搭建Vue的环境工具,(javascript运行时),以及使用里面的npm命令安装vue项目所需的依赖包。

联系:

  • vue-cli 是vue的命令行工具
  • vue-cli是一个完整的vue项目核心构成

话不多说,先安装node.js环境。

nodejs安装及修改全局配置

二.安装vue及两种方式创建项目

1. 安装vue

打开cmd命令行:
安装vue-cli:

npm install -g vue-cli

安装webpack:

npm install -g webpack

在这里插入图片描述
cmd输入:

vue -V       //此处没问题
webpack -v     //此处回车后,它提示需要安装webpack-cli

这里排一下雷,千万别输入yes,一定输入no,咱们自己安装(我自己yes结果安装出现问题,找不到webpack\package.js,其实包安装好了,但它沙雕找不到);

输入命令(要全局安装):

npm install -g webpack-cli

安装完后输入命令查看:
在这里插入图片描述
OK,没问题。vue安装好了。

2. 创建vue项目

2.1 IDEA创建vue-test使用webpack初始化项目

打开idea;

找到插件添加vue.js插件支持:
在这里插入图片描述
在这里插入图片描述
接下来:
在这里插入图片描述

看网上很多教程是新建static web项目,我这个版本里没有,可能是最新版的缘故吧,是web,然后里面选择vue.js让他给你自动创建:
在这里插入图片描述
这里:
在这里插入图片描述
属实有点慢哈;
在这里插入图片描述
好慢…期间卡了还是怎么,下方提示:
indexing paused due to project generation

终于生成了。怕了怕了,看这情况还是cmd使用vue ui可视化创建吧。

在这里插入图片描述
有点奇怪,项目目录结构里还有个nodejs缓存文件夹,有点懵逼。。。删了不影响。
另外默认npm run serve运行。可以点上方三角执行,也可以在terminal输入npm run serve运行。之后浏览器打开localhost:8080就看到咯。

2.2 cmd ui可视化创建,IDEA导入编辑

安装vue cli 3和4版本,2几乎过时了:

npm install -g @vue/cli
//不指定版本会安装最新的 目前是4.5.11 (2021/2/26)
 
npm install -g @vue/cli@3  
//会安装最新的3的版本3.12.1
 
npm install -g @vue/cli@3.6.3   
//安装指定的3.6.3版本

打开cmd命令窗口执行npm install -g @vue-cli:
在这里插入图片描述
哦豁完蛋,因为第一种方法里已经给安装了vue-vli,所以报错了;怎么解决呢,那当然是删掉所在文件夹(node_global里的所有东西)重新下载依赖呗。
在这里插入图片描述
安装完毕。
然后执行vue ui:
在这里插入图片描述

此时你的浏览器跳出一个网页:
在这里插入图片描述
这就是我们的GUI可视化界面,以后每次创建项目就可以在cmd输入vue ui然后在这里各种骚操作啦,淦!

等等,顺便讲一下在这个界面咋地操作吧还是,好人做到底,送佛送到西嘛~

2.3 GUI操作

在这里插入图片描述
又试水试出了坑。。。就是如果你项目路径无所谓就这样就行;如果你想创建在自己想要的文件夹下,一定要在cmd里就事先进入那个路径下,然后执行vue -ui命令。(我c盘下进来创建想改成其他盘,死活不行,因为最下方所在根路径就在c盘,怕不是拿头去d盘)。
重来:
在这里插入图片描述
点创建;
在这里插入图片描述
继续;
在这里插入图片描述
预设,预设选手动;
在这里插入图片描述
然后进入功能选择;
在这里插入图片描述

这里边Router和Vuex是基本选项,CSS预处理器也选中,下一步会具体选择。其他后续按需求添加;
下一步;
常见的stylus、sass、LESS
vue中常用的是stylus,因为来源于node.js,与JS关系密切,语法灵活、方便易用。使用stylus可以使用变量、函数、循环来编写CSS样式文件。
至于Router选择history,选择hash模式的话,url会携带“#”,不好看且某些情况下增加考虑难度;
在这里插入图片描述
点击创建项目,等待…(是否设为预设模板无所谓,懒就设,下次直接用模板创建项目)
没想到windows系统还给提示:
在这里插入图片描述
浏览器来到这个界面;
在这里插入图片描述
可以添加需要的插件,比如axios;
在这里插入图片描述
可以添加项目依赖;
在这里插入图片描述
可以在配置处更改配置;
在这里插入图片描述

任务处可以编译,打包,热更新等;
在这里插入图片描述
比如,既然建好项目了,肯定先编译运行一波。点serve;
在这里插入图片描述
好了,项目创建成功。
下面的更多可以点开回到项目管理器,重新创建项目等。
在这里插入图片描述
最后如果想导入idea,可以打开idea点导入项目把这个项目导入进去进行开发。
在这里插入图片描述

over。

不积跬步无以至千里。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/157435.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!