Vue项目环境准备

单文件组件

（单文件组件）组件结构分成3部分：

Template（模板）：显示内容的区域

Script（组件逻辑）：整个组件写逻辑的区域

Style（样式）：渲染组件内容的区域

 

Src: 是整个项目的源代码

Main.js：整个项目的入口文件

后缀名.vue：被称为“单文件组件”，里面放置的是vue的组件

Npm run dev：表示启动Vue项目

路由：就是根据网址的不同，返回不同的内容给用户

<router-view/>：展示的就是路由地址对应组件中的内容

路由配置地址：@/router/index.js

App.js：是整个页面的根组件

 

 

多页面 与 单页面

1. 多页面：指的是每次切换到一个页面的时候，后端服务器都会返回一个xxx.hml 的文档，这种网站我们就称之为多页面网站

优点：首屏时间快（因为，首页只经过http的请求，无需切换页面），SEO效果好 （SEO都是从网页获取内容，然后，进行网页排名的）

缺点：页面切换慢

 

1. 单页面：指页面跳转的时候，不是向后端请求html文档，而是通过js渲染将当前 的页面内容删除掉，然后，添加新的页面内容

优点：页面切换速度快

缺点：首屏时间稍慢，SEO差（所以，就是为什么说Vue.js更适合做移动端）

 

 

项目代码初始化

1. <meta name=”viewport” content=”width=device-width,initial-scale=1.0,

minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”>

Initial-scale：初始的缩放比例，一般都是正常的1.0

Minimum-scale：最小的缩放比例

Maximum-scale：最大的缩放比例

User-scalable：用户进行屏幕缩放比例

 

1. Reset.css：解决默认css样式不统一的问题，指的是一个重置页面的样式表，因 为，每个浏览器提供的默认样式都是不一统一的，这个时候就需要进行统一

 

1. Border：解决移动端有一个1px像素的问题，手机的分辨率比较高
2. Fastclick：解决click事件触发延迟300ms的问题，这是个第三方的模块

 

npm install fastclick --save  //  把fastclick第三方模块包，安装到项目 的依赖之中

 

--save: 不管在开发环境中或者打包生成线上的代码，都是需要fastclick第三方 模块，把它存放到package.json里的dependencies（这段不需要手动书写，在窗 口安装完以后会自动加上），记住：安装fastclick第三方模块的时候，一定要在 项目里安装