VUE脚手架使用教程

VUE脚手架使用教程

前言：我们如何解决组件使用的问题这一问题只能采用VUE的脚手架组件了，VUE的脚手架在英文中叫做（VUE-CLI）接下来我们就来了解下VUE脚手架的使用吧，在这之前我们需要先安装一些软件才可以哟，HBuilder已经阵亡了，不能搭建VUE脚手架这个框架了…

1、WebStorm软件安装

WebStorm是一款IDE工具和HBuilder类似，但是他可以支持使用DOS命令界面，并且可以支持更多的文件格式的提示哈，所以我们需要安 装这款IDE工具哦，好，我们去下载吧。
官网地址：https://www.jetbrains.com/webstorm/download/

现在WebStorm有30天试用，想破解的话要自己想招哈，以下是安装教程：



注意：安装路径中文件夹名不能携带中文以及不能携带空格

之后连续点击next即可安装成功


安装成功重启系统即可

重启后设置一下
直接设置成试用即可，30天学会Vue已经足够了

2、Node.js软件安装

Ide工具安装好之后，我们的VUE还需要很多的插件工具哦，所以这边
官网地址：https://nodejs.org/zh-cn/download/
所有版本：http://nodejs.org/dist/

查看安装环境：

Window + R键打开DOS界面，并输入cmd，点击确定

输入npm -version 回车（就可以看到安装版本是6.13.4）

输入node --version 回车（就可以看到node版本）

修改存放插件的路径：
注意：如果不修改的话，nodejs默认的软件和缓存的路径是c盘哦，你的c盘就去了，要知道下载在哪里吗？
我的电脑，右键，属性：

选择高级系统设置，弹框选择环境变量：

找到admin的系统变量，找到path，找到对应的变量值，这就是对应的下载位置哦

没有必要删除，但是我证明了安装位置了吧，所以要注意哦，要配置默认路径哦，不然你的c盘就开心咯

在其他磁盘创建两个文件夹分别是：node_cache,以及node_global文件夹（我这里创建的路径分别是：D:\AddSoft\nodejs\node_cache和 D:\AddSoft\nodejs\node_global）
Window + R键打开运行界面，并输入cmd，点击确定

依次执行命令：
设置全局组件文件的存放位置
npm config set prefix “D:\AddSoft\nodejs\node_global”
设置缓存文件的存放位置
npm config set cache “D:\AddSoft\nodejs\node_cache”
设置npm链接位置（以下的是官方地址，最好别改，后续还要改回来，麻烦）
npm config set registry http://registry.cnpmjs.org
设置环境变量：
我的电脑，右键，属性：

选择高级系统设置，弹框选择环境变量：

弹框后点击新建，变量名为NODE_HOME，变量值是 D:\AddSoft\nodejs，这里的变量值，请参考我的安装位置来自行设定哈！

点击确定后，找到path变量，双击
在变量值的最前面输入：%NODE_HOME%\node_global; （注意分号，以及后面原来的配置不能删除哈）
最后点击确认保存即可

注意：npm和node命令都是nodejs的主要命令组成部分，这里的npm主要用来软件插件或组件，这里的node命令主要是用来执行xxx组 件用。
小结：也就是说WebStorm主要是IDE工具，高效开发使用，而nodeJS主要是组件创建和执行。

3、开始安装（我的第一个VUE脚手架项目，使用VUE官网推荐的方式哈）

安装vue-cli模块：
官网地址：https://cli.vuejs.org/zh/guide/installation.html
Window + R键打开运行界面，并输入cmd，点击确定

输入命令：npm install -g @vue/cli

可以用：vue --version 命令，查看当前安装版本

官网地址：https://cli.vuejs.org/zh/guide/cli-service.html
创建新的项目工程

选择Empty Project以及一个文件夹作为项目工程，点击create按钮

这样项目就创建好了

点击项目名右键-Open in Termainal


输入vue create hello-world （这里的命令：vue create 项目名称）

这里的default（babel，eslint）是默认的配置，如果是基本操作可以达到要求哦，如果是Manually select features则是自定义配置信 息，我们学习推荐使用这种配置哦。通过键盘上下选择，Enter选中。

接下来是选择需要添加的信息：通过键盘上下键选择，空格键 选中，a键全选，i键反选，回车确定。
Babel：就是把各种javascript千奇百怪的语言统统专为浏览器可以认识的语言的插件。（必选）
TypeScript：TypeScript 扩展了 JavaScript 的语法，所以任何现有的 JavaScript 程序可以不加改变的在 TypeScript 下工作。（可选）
Progressive Web App（PWA）Support：数据推送技术（手机使用屏幕插件，天气等的推送）支持工具。（不选）
Router：路由使用。（必选）
Vuex：一个专为 Vue.js 应用程序开发的状态管理模式。（必选）
CSS Pre-processors：对数据进行编译，转换成各个浏览器都能支持的css数据信息。（必选）
Linter / Formatter：必选。
Unit Testing：单选测试（不选）。
E2E Testing：测试（不选）。

是否使用历史模式（你的路由是否会改变呢？不会的话就不用这个模式哦），这里输入n即可。

选择CSS预处理的方式，也就是CSS样式的整理，选择stylus即可。

代码风格校验，选择ESLint + Prettier即可。

添加校验时间，默认即可，保存数据时校验。

保存自定义存放位置，默认即可。

确定保存之前的配置吗？输入y即可

保存的文件名，输入保存配置信息的名称。回车开始安装即可

需要等待一会才能创建好哟。
注意：下回如果还需要创建项目工程就可以通过保存好的配置进行创建了，如下图：

看到以下这张图说明创建成功了哈

4、测试运行：

点击项目名（hello-world）右键 - open in Termainal 打开dos界面，输入 npm run serve 命令


到这里就可以了，看到链接了吧，打开浏览器，走一个吧

好啦，之后的章节我们就来讲解细节咯，这里的基本安装看懂了吗？