Vue.js教程-安装和HelloWorld

前言

作为国内最潮流的前端框架值得一学，同时公司后端面试中也会提到一些，反正就是逼着后端转全栈呗，公司少花钱，咱们多拿钱。
Vue.js官方文档：这里面介绍了很多内容，非常全面，毕竟目前还是国内是主流市场，相比较于Angular和React更容易上手，也更容易部署，简单好用就完事了。

安装vue教程(HelloWorld)

安装node.js

首先安装node.js，这步不是必要的，如果你使用的是html的话，那可以直接通过这个方法直接引入：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

如果是正式开发的话，使用node会非常方便，打包部署、解析vue组件模块并进行拼接(为什么要将vue拼接下个文章讲)，测试服务器localhost等功能，比较省事。
先去node官网下载：node.js官网
一直点下一步就安装完了。
使用命令行，输入node -v查看版本号，出现版本号就证明安装成功。
因为node带了npm，所以直接安装vue就行，如果感觉慢的话，就先安装cnpm(淘宝的镜像，速度很快，但有可能缺少相应的包)，安装语句：npm install -g cnpm --registry=https://registry.npm.taobao.org

安装Vue

一般都安装最新版，安装语句：npm install -g @vue/cli(3以上版本)
三以下版本安装语句：npm uninstall -g vue-cli
用vue -V查看版本就行了。

创建Vue项目(HelloWorld)

开发工具

我用的是VScode，这玩意开放性特别大，有很多合适的插件，非常nice，安装vscode就不说了，先介绍里面用到的插件。
这些插件很多博主都有介绍和使用，但一般看英文也能看懂，挺简单的。

创建第一个项目

vue-cli3以上使用vue create first就行，first是项目名。
点击回车后出现下面的选项：
第一行是我以前保存的用户的使用插件情况。
第二行是默认创建，选中第二行点击回车就自动创建项目了。
第三行是进行自定义创建。
在这里我选择第三行给表演一下，来吧展示！
第一个选项必选，没啥好解释的。
第二个是支持TypeScript，咱一般都用JavaScript。
第三个是渐进式Web应用程序(PWA)
第四个是路由，和后端的不太一样，它这个是把路径和组件或试图连接起来，也是非常简洁方便。
第五个是vue的状态管理器，大管家，管理整个项目中共有的东西，后面再详细介绍。
第六个是css预处理，想用less啥的就选吧。
第七个是代码校验，反正我不用，感觉这玩意怪严格的，太麻烦。
第八个和第九个就是测试，也不用选。
第三个是问router使用什么模式，分为两种模式，一种是hash，另一种是history，常用的是history，等写到路由细说，最直观的效果例如：
- hash模式：localhost:8080/#/home
- history模式：localhost:8080/home
第四个是选择一个css预处理的，常用的是node-sass、less啥的。
第五个是选择配置文件，有两个选择，第一个是选择单独的文件中，第二个是写在package.json里，我选的是写在单独一个文件里。
最后一个是用不用保存当前选择作为一个用户，保存了下次就会出现我那个第一个选项（coderhqf那个选项），下次选它就行了。
项目成功创建后出现：
依次在vscode终端中输入这两个语句就能启动了。
显示的是vue的界面：

创建HelloWorld

目前的项目打开是vue的界面，那么要显示出HelloWorld就先把初始项目中没用的组件和代码删掉。
当前的目录结构：
对于自己的项目，assets里的图片、components中的vue文件和view里的vue文件都是没有用的，删掉就行了，都是vue文件为什么存在于不同的文件夹下呢？下一篇文章就说啦！
下面删代码：
把<router-link></router-link>和<router-view/>删掉，因为这个是使用router-link连接的子组件，没用的CSS也可以删掉，该成下面的：
因为在router中import了已经删掉的Home.vue和About.vue了，所以要删掉。
修改后效果：
当前的目录结构就非常干净：
在vscode终端输入npm run serve运行项目，效果：
最简单的HelloWorld就结束了！