vue随笔

启动vue项目

1.npm install 

2.npm run dev

界面的实现

界面的本质是一个个的 vue 项目，存储地址是 /src/components 。打开这个目录我们可以看到项目初始给的 HelloWorld.vue 。可以清晰地看到项目分为三段结构：第一段是 <template> ，决定了网页的布局；第二段是 <script>, 存储着网页内部的数据和方法；第三段是 <style>, 决定了网页的样式。第一段布局的内容，就是设计中提到的模板的内容，也是写惯后端的人最不熟悉的部分，第二段的内容和后端的代码是同源的，语法角度略有不同，第三段暂时不做讨论。

 

设计的实现

1）跳转的实现，主要借助于一个工具，名字叫做 vue-router 。安装方法是在项目根目录下安装 vue-router。 

安装命令是 npm install vue-router。顾名思义，这个工具主要是用来控制路由的。使用方法是修改 src 目录下的 main.js 文件

 

上图还是比较好理解的，当我们启动应用后， 访问  /  和  /login  会进入登录界面， 访问 /display 会进入展示界面。另外细心的读者可能发现 ivew 和 axios 出现比较频繁，前者是 css相关的样式，后者是 vue 向后端发送 http 请求的工具，暂时和基础的本项目无关。

路由变更的具体方法如下，很方便理解。mounted 是写在第二段 <script> 的内容，是进入页面就会执行一次的内容。我们可以用这个来初始化页面的数据