Vue2.5学习笔记（四）Vue-cli脚手架入门

使用的脚手架版本为2.0+

1.初始化项目

vue init webpack projectname

启动项目：

npm run dev

2.项目的目录结构

config目录：

• dev.env.js 开发环境配置信息
• index.js 基本配置信息
• prod.js 生产环境配置信息

3.Vue中的单文件组件

在main.js中，声明了一个根组件并将其挂载在id的app的元素上。


以往我们定义组件，会通过Vue.component()或者 var componentName = {}的形式定义。
当我们在一个以.vue为扩展名中定义组件时，这样的组件叫做单文件组件。

4.Vue中的路由

路由就是根据网址的不同返回不同的内容给用户。
这是Vue项目的默认首页：

首页里的内容来自于哪里？
我们先查找首页的模板文件：

发现了根组件所定义的位置，于是我们来到的main.js:

发现根组件中有个名为App的组件，于是我们来到App.vue

发现除了logo外，其他什么内容都没有。
那么首页中的文字和链接究竟来源于哪里？
答案就在于<router-view/>这个标签。
当我们删除<router-view/>标签，首页上的文字和链接就没有了。
如何理解<router-view/>？
<router-view/>显示的是当前路由地址所对应的内容。当前路由地址是：
也就是“/”根路径。我们来看

打开/src/router/index.js，真相大白：

练习：将首页从HelloWorld换为Home
Step(1):

Step(2):src/router/index.js

5.Vue应用是一个单页应用

在Vue中通过类似于a标签的router-link标签来进行‘’页面跳转”：

<router-link to="/list">列表页</router-link>

从Home跳转到List，在控制台看到的是：除了初始请求index页面时请求了html文档之外，并没有请求新的文档。
这说明了Vue应用是一个单页面应用，其所谓的“页面切换”，其实原理如下：
JS感知到URL的变化，JS将当前页面的内容清除，再把下一个页面的内容挂载到页面上，此时的路由就不是后端来做，而是前端在负责。
单页应用的优缺点：
优点：页面切换快
缺点：首屏时间稍慢，SEO差

6.项目代码的初始化

由于我们开发的项目是移动端，需要进行一些代码初始化工作。
（1）在index.html中完善meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0,maximun-scale=1.0,user-scalable=no">

（2）引入reset.css
https://huruqing.gitee.io/demos/source/reset.css

放置目录为
（3）解决一像素边框问题，引入border.css
https://blog.csdn.net/weixin_34124577/article/details/91383306
（4）解决300ms点击延迟问题：使用fastclick库
安装

cnpm install fastclick --save

导入：main.js

import fastClick from "fastclick"

将fastclick绑定到document.body上：

fastClick.attach(document.body);