vue小项目总结与笔记【三】——项目代码初始化

落日映苍穹つ 2022-01-07 09:15 259阅读 0赞

因为我做的是移动端的项目，这里主要说一下移动端相关。

第一步：重置meta标签

index.html文件一开始只是这样的

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0>
        <title>travel</title>
      </head>
      <body>
        <div id="app"></div>
        
      </body>
    </html>

对于移动端，要禁用用户手指缩放，页面比例始终为1:1

在content属性里添加

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

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <title>travel</title>
      </head>
      <body>
        <div id="app"></div>
        
      </body>
    </html>

第二步：引入reset.css文件，初始化样式

项目的入口文件为main.js，所以在main.js里引入，引入方式为：

import ‘reset.css的路径’

第三步：引入border.css，为了解决多倍屏下，1px边框会被显示成多像素的情况

import ‘border.css的路径’

第四步：解决移动端300ms延迟问题，安装fastclick

先安装依赖:打开cmd，cd到当前目录下，执行命令

npm install fastclick --save

（插个小tips：

安装依赖包的时候

\--save：将保存配置信息到pacjage.json的dependencies节点中。

\--save-dev：将保存配置信息到pacjage.json的devDependencies节点中。

dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块

devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它

）

安装完成后，再次运行项目 npm run start

在main.js里引入，并将attach方法绑定在document.body上

import fastClick from 'fastclick'
    
    
    
    fastClick.attach(document.body)

第五步：在iconfont创建项目，管理本次项目的小图标，去自己的iconfont账号创建就好了。

初始化先到这里。

每次新增代码或者修改代码，要记得上传到线上，养成好习惯。

转载于:https://www.cnblogs.com/Ashe94/p/10552655.html

发表评论取消回复

表情：

评论列表（有 0 条评论，259人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目初始化工作

vue项目初始化工作 1、在assets文件夹中新建 css、js、 img文件夹 2、在css、js文件夹中新建reset.css文件、 rem.js文件、serv

╰半橙微兮°/ 2023年07月13日 13:47/ 0 赞/ 17 阅读

相关 Vue之初始化一个vue项目

Vue之初始化一个vue项目以防忘记需要重新查资料创建，在这里简略的记一记 1、node.js官网下载安装node.js [https://nodejs.org/

桃扇骨/ 2023年07月07日 08:20/ 0 赞/ 25 阅读

相关【Vue】vue-cli 初始化项目的项目结构

目录 1. vue-cli 简介 2. vue-cli 安装 3. vue-cli初始

清疚/ 2023年02月20日 07:20/ 0 赞/ 61 阅读

相关初始化vue项目

方法一：可视化界面创建 vue ui 之后会跳转到浏览器可视化界面，按照步骤创建项目即可 ![在这里插入图片描述][watermark_type_ZmFuZ

àì夳堔傛蜴生んèń/ 2022年11月16日 13:56/ 0 赞/ 231 阅读

相关【vue】vue3.x项目初始化

文章目录 vue项目初始化参考文档出现的问题 Delete \`␍\`eslint(prettier/pretti

太过爱你忘了你带给我的痛/ 2022年09月03日 14:16/ 0 赞/ 272 阅读

相关初始化vue项目

vue环境搭建以及vue-cli使用 Vue多页面应用文件引用 ![70][] vue官网下载在项目目录下输入: npm i vue --save,会出现mod

谁践踏了优雅/ 2022年05月14日 09:15/ 0 赞/ 268 阅读

相关 Vue学习笔记6.5 项目初始化

1.下载reset.css和border.css然后倒入到vue的项目中 2.安装 fastclick npm install fastclick --save(s

Love The Way You Lie/ 2022年03月18日 09:06/ 0 赞/ 217 阅读

相关 vue小项目总结与笔记【三】——项目代码初始化

因为我做的是移动端的项目，这里主要说一下移动端相关。第一步：重置meta标签 index.html文件一开始只是这样的 <!DOCTYPE html>

落日映苍穹つ/ 2022年01月07日 09:15/ 0 赞/ 260 阅读

相关电商项目（十三）项目初始化（数据库初始化）

![这里写图片描述][70] 新建数据库： ![这里写图片描述][70 1] ![这里写图片描述][70 2] 将数据库复制进来： ![这里写图片描述][7

以你之姓@/ 2021年09月26日 14:00/ 0 赞/ 396 阅读

相关 vue项目笔记（3）-Git克隆仓库代码-初始化项目-提交代码到远程仓库

在代码仓库创建完成之后，通过Git克隆代码到本地，具体步骤如下： 1、登录码云（[https://gitee.com][https_gitee.com]），进入

女爷i/ 2021年09月16日 01:50/ 0 赞/ 514 阅读