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

一.相关知识及准备

概念：

• 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。

不积跬步无以至千里。