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连接的子组件，没用的CSS也可以删掉，该成下面的：
  

• 因为在router中import了已经删掉的Home.vue和About.vue了，所以要删掉。

• 修改后效果：
  

• 当前的目录结构就非常干净：
  

• 在vscode终端输入npm run serve运行项目，效果：
  

• 最简单的HelloWorld就结束了！

后话

• 把以前自学的vue总结整理一下，估计一周两周写完这个vue，其实我是个后端，CSS对我一点也不友好！！！！好气噢，主要还是自己审美不太行。