Vue实战项目开发--vue项目预热

项目的源代码在GitHub上：点击查看

视频资源：可以加我百度网盘好友“任性的_我_”，免费发给你

项目环境准备

• 安装node.js环境（文档：node官网下载，推荐使用长期维护版LTS），不懂怎么安装可以自己搜一下
• 然后各种工具，这里有我之前的一篇文章（文档：npm和必要工具的安装）
• 使用GitHub来保存项目代码（文档：github官网，这里推荐使用github，还有很多代码管理工具）

       

• 安装git，然后鼠标右键点击Git Bash Here，在本地生成SSH公钥，然后在GitHub绑定就可以了
• 最后在GitHub上创建项目，然后拉取到本地，你就可以在拉取的文件夹中保存你的项目了，可以使用Git Bash Here进行push到GitHub上

项目代码结构介绍

      

• README.md：项目的说明文件
• package.json：项目的第三方依赖都放在这里的
• package-lock.json：第三方依赖的版本说明
• LICENSE：是一个开源协议的说明（这里没有）
• index.html：是项目首页的模板文件
• .postcssrc.js：是对postcss的配置项
• .gitignore：不需要把文件传到git仓库里时，就把这些文件在这里配置
• .eslintrc.js：配置了代码的规范，如果代码不规范就会报错
• eslintignore：配置哪些文件可以不用eslint检测代码的规范
• editorconfig：帮助我们配置编辑器的语法
• .babelrc：因为写的代码的vue单组件的项目，所以需要babelrc这个解析器来做一些语法上转换，最终转换为浏览器能够编译执行的代码
• static：放的是一些静态资源，或者是后续要模拟的json数据
• node-modules：项目所需要依赖的第三方包文件
• src：src目录下放的是我们项目的源代码；main.js是整个项目的入口文件，app.vue是项目最原始的根组件，router/index.js下放的是项目的路由配置，components放的是项目的小组件，assents放的是项目用到的图片资源
• config：放的是项目的配置文件，基础配置是放在config/index.js中，开发环境是dev.env.js配置文件，线上环境的配置文件是prod.env.js，test.env.js是测试环境（新增的）
• bulid：是项目打包的webpack的一些配置文件

单文件组件与Vue中的路由

• 单文件组件：以.vue为结尾的文件，使用时通过在main.js中创建vue实例来使用

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

         其中app.vue就是项目最原始的根组件

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

      <router-view/>：显示的是当前路由地址所对应的内容，通过路由去查找

       mian.js中引入router路由配置文件，路由的配置文件在router文件夹下（具体的，每一个可能不同），就是你在浏览器输出不同的地址，程序都会在router/index.js下查找对应的路由配置项

多页面应用和单页面应用

   多页应用：页面跳转---返回HTML

• 优点：首屏时间快，SEO效果快
• 缺点：页面切换慢

   单页应用：页面跳转--JS渲染（通过js感知到url的变化，然后用js动态的把当前的内容清除掉，再把写一个页面的内容挂载到页面上，就是路由前端来决定怎么加载哪些页面的内容）

• 优点：页面切换快
• 缺点：首屏时间稍慢，SEO差

项目代码初始化

•     在index.html中meta标签中增加minimum-scale=1.0,maximum-scale=1.0,er-scalable=no"，是用户在手机端不可以缩放屏幕。

 

       修改之后的meta标签：

<meta name="viewport" content="width=device-width,
    initial-scale=1.0,
    minimum-scale=1.0,
    maximum-scale=1.0,
    er-scalable=no"
>

•   引入reset.css（可以重置CSS样式，因为每个手机的浏览器不同，然后打开的样式会有区别，重置后就不会出现这样的情况）

       在src/assets文件路径下新建styles文件夹，在styles中放入reset.css文件，最后在项目的入口文件main.js中引入restet.css文件

import './assets/styles/reset.css'

•    一像素边框的问题：

         引入border.css来解决，通过css一个放大缩小的修饰符transform来实现的

import './assets/styles/border.css'

•    移动端300毫秒点击延迟的问题：就是手机某些机型中点击触发click事件，会延迟300毫秒才执行

npm install fastclick --save

 通过安装fastclick这个包，然后在main.js中引入，最后就可以解决这个问题了

在main.js中引入：

import fastClick from 'fastclick'

fastClick.attach(document.body)

• iconfont：创建自己的iconfont项目图标库

1.  在这个网站 iconfont官网 注册登录 
2. 注册登录后，点击图标管理下我的项目，进入下图页面，然后点击对应哪个红色框的按钮，然后就创建好了自己的iconfont项目图标库

上传项目

  最后把你的项目上传到GitHub上