Vue3 初探

Vue 作为一款国人开发的前端框架，是目前使用率很高的一款框架。目前 vue 最新版本为 v3.x，对于 2.x 的版本有一些不兼容的修改，这个在使用时需要注意。作为一个初学者，我就直接从最新的版本开始学习了，省掉了后续升级的问题。

虽然我对于 vue 来说是一个新人，但毕竟还是有着后端语言和 jquery 的开发经验，也就没有使用 vue 提供的 js 导入方式来进行学习，直接上手 vue@cli 模式，通过命令行来创建程序。

环境配置

1.检查软件安装情况

$ npm -vnpm: command not found

这样的输出结果就说明我们的电脑上面没有安装 node 的包管理器 npm。那么我们要做的就是安装 nodejs。打开 nodejs 官网的下载页面https://nodejs.org/en/download/，在其中根据电脑的类型，选择具体的安装包下载安装就可以了。然后再次执行上面的命令：

$ npm -v 6.18.4

这里就会显示出具体的版本类型了，如果你的版本和这里不一样，没有关系，这个不影响后面的命令执行。2.安装 vue@cli

$ npm install -g @vue/cli.../usr/local/bin/vue -> /usr/local/lib/node_modules/@vue/cli/bin/vue.js+ @vue/cli@5.0.8updated 13 packages in 30.369s

等待一段时间的执行，这样就安装好了命令行的 cli 工具。3.创建 vue 项目

$ vue create example

这时候，会让你选择不同的选项，反正我们是第一次使用，就直接全部默认就可以。然后就又是一顿安装操作，最后会显示安装成功，并提供了接下来要执行的命令：

 $ cd example $ npm run serve

最后会显示推荐我们执行的命令，我们依次输入上面的个命令，项目就起来了：

这里在执行 run 命令的时候，首先是根据配置 build 相关的代码，然后启动服务。执行完毕之后，输出内容最下面告诉了我们具体的访问地址，分为了本地和网络访问，我们本地使用的，可以直接在浏览器中输入本地的访问地址，然后就可以在浏览器中查看具体的网站内容。

到现在为止，我们已经创建了一个 vue 的项目，并且执行成功，可以让人在浏览器中展示。

在网页中，显示了多个组件的访问地址，直接点击相应的链接地址，就可以查看不同组件的内容。

项目结构

项目现在已经执行起来了，就让我们来看看这个项目是由什么代码组成的吧！

├── README.md  //项目的介绍文件。这里目前是将package.json中定义的命令进行相应的说明。├── babel.config.js  //vue中babel组件的配置文件├── jsconfig.json  //定义了当前目录是项目的根目录，还有其他的一些配置选项├── node_modules  //node项目的依赖列表，类似go的vendor目录，存放所有项目已经安装的依赖组件和代码。├── package-lock.json  //当项目使用npm按照依赖之后，就会将各种组件的版本固定下来，可以避免不同开发人员环境不同导致的依赖版本不一致问题。├── package.json  //node项目的配置文件，定义了项目的原始配置信息和各种依赖列表。其中scripts定义了支持的命令，这里定义的命令可以通过"npm run"执行，就像刚才我们执行的"npm run serve" 就是这里定义的，实际执行的命令是"vue-cli-service serve"├── public    //项目的入口文件，包含了index.html和favicon.ico。不添加其他的代码在这里├── src    //我们写的大部分代码都保存在这里，已经建了：  assets目录（存放静态文件）,components（存放自定义或第三方的组件文件）,App.vue 是vue框架的入口文件，main.js被index.html引入的文件，实际js代码的入口文件。 └── vue.config.js  //vue相关的配置

这个目录结构是 vue3 之后重新定义的目录结构，如果你使用的 vue2，那么看到的目录结构是不同的，推荐还是使用 vue3 吧，反正是新学习的，直接从最新的版本开始好了，避免后面还要进行项目的升级操作。

源码目录

所有的功能代码都在 src 中，让我们看下 src 中的具体代码目录：

  src   ├── App.vue   ├── assets   │   └── logo.png   ├── components   │   └── HelloWorld.vue   └── main.js

main.js 是 vue 框架启动的代码，通过创建 vue 的 app，然后将 app 挂在在具体的 index.html 的 dom 节点上面，最后渲染出来。文件的内容如下：

import { createApp } from 'vue'import App from './App.vue'
createApp(App).mount('#app')

通常来说，我们不需要修改这块的内容，除非你需要在全局进行一些配置，这时候才需要修改这里的内容，比如引入新的项目组件 element 等，才会需要在这里进行修改，我们就暂不考虑修改这里的代码了。

这里 import 命令是导入需要的文件或方法的，第一行的 createApp 就是将 vue 框架的方法导入到当前文件，可以像当前文件定义的方法一样进行调用。

App.vue 是 vue 结构的入口文件，所有后续实现的代码，通过一连串的引入操作，最终都是汇总到这个文件里面的：

这个文件内的代码分为三个部分，template 模板部分，主要放 html 的结构代码，script 这里放相应的 js 操作代码， style 放该页面内容的样式内容。

vue 这里的所有文件都是这样的三个部分组成，在 vue 中这种组织代码的文件叫做单文件组件（缩写 SFC）,允许将 Vue 组件的模板、逻辑与样式封装在单个文件中。

SFC 这种组织方式，可以非常方便的实现单个 vue 的组件，可以将这个组件复制到不同的代码中使用，可以方便代码的重用，我是比较认可这种方式的。就像App.vue中引入的HelloWorld组件，就是这样的组织方式，我们就可以将这个组件放到不同的文件中使用。

HelloWorld.vue就是项目给我们提供的一个组件编码实例，后续我们就可以按照这种方式实现我们的代码了，这里具体的代码内容，就留给你自己看了。

功能开发

我们目前已经了解了项目组成，就可以开始简单的修改操作了。这里我们也不进行过于复杂的开发，只是简单的修改下当前的页面，查看下代码修改的影响。

App.vue 中的 template 里面目前有两个元素:

  img html的元素，说明这里展示一张图片
  HelloWorld 这里就是下面导入的组件，也就是HelloWorld组件，具体的内容是在components/HelloWorld.vue中实现的。

我们首先移除 img 元素，看下我们的页面会发生什么，这里不用刷新浏览器。

可以发现，页面上方的图片不见了。这里我们没有刷新浏览器，但是图片却自动不见了。现在我们重新加上 img 标签。看下浏览器，可以发现图片又出现了。

这个就是刚才我们命令npm run serve 的结果，我们启动这个服务之后，任何我们对代码做的修改，都会实时的显示在浏览器上面，这也叫热加载，非常方便我们的代码开发。避免我们每次修改了一些代码都还要重新编译一遍，节省我们的开发时间。

结尾

好了，到现在为止，我们了解了如何创建一个 vue3 的项目，同时知道项目各个部分代码的功能，并且简单的对代码进行了修改，了解了接下来如何进一步的的开发。

接下来就按照你自己的想法，开始修改实现自己的网站吧！