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

墨蓝 2022-05-09 03:16 330阅读 0赞

### 项目的源代码在GitHub上：[点击查看][Link 1] ###

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

### 项目环境准备 ###

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

![70][]

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

### 项目代码结构介绍 ###

![70 1][]

*  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标签：

*    引入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官网][iconfont] 注册登录 
2.  注册登录后，点击图标管理下我的项目，进入下图页面，然后点击对应哪个红色框的按钮，然后就创建好了自己的iconfont项目图标库

![70 2][]

### 上传项目 ###

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

[Link 1]: https://github.com/HZhen/Vue-project
[node]: https://nodejs.org/zh-cn/
[npm]: https://blog.csdn.net/wo_921110/article/details/78770114
[github]: https://github.com/
[70]: /images/20220509/afa2214c5c014da1ad64279d8e44ff32.png
[70 1]: /images/20220509/4784480ee9b44fb182a00429bbae6f60.png
[iconfont]: http://www.iconfont.cn
[70 2]: /images/20220509/76cf74976d194795a21c1ec4eafa9ed7.png