vue-项目

Posted 2022-05-04 sansancn

环境配置：
1.安装node git
2.注册码云账号 并创建自己的库 win在 git bash中配置公钥
3.将码云上项目克隆到本地 git clone 地址（ssh)
4.通过脚手架 将vue相关文件下载到相应文件夹
5.将本地的文件同步到码云上
退出服务
git status
git add .
git commit -m ‘project initialized‘
git push

项目代码
README.md --项目说明包
package.json -- 存放依赖包
package-lock.json -- package锁文件 确定第三方包的版本
LICENSE -- 开源协议的说明
.postcssrc.js -- postcss的配置文件
.gitignore -- 配置不需要上传的文件
.eslintrc.js -- 配置了一些代码的规范
.eslintignore -- 这里面的配置项不受.eslintrc.js的检测
.editorconfig -- 编辑器的配置项
.babelrc -- 语法解析器配置项 将vue转换成浏览器能执行的代码

多页面应用与单页面应用优缺点
多页面应用
每次页面跳转，后端返回一个新的 html
优点：首屏时间快（页面首个屏幕的内容展现速度），SEO 效果好（搜索引擎可以识别首页中的跳转其它页面的链接）
缺点：页面切换慢（每次跳转页面需发送 HTTP 请求）

单页面应用
JS 感知路由（URL）变化，动态清除页面内容并将新页面的内容挂在到页面上（JS 渲染），此时由前端实现路由
优点：页面切换快
缺点：首屏时间慢，SEO差

在vue中不使用标签进行页面跳转，使用标签进行页面跳转
列表页 其中to="" 相当于href=""

项目代码初始化

1. 防止手指放大缩小页面
   修改viewport，如图。

2. 基础样式修饰
   main.js：import ‘./assets/styles/reset.css‘

3. 移动端1像素边框
   main.js: import ‘./assets/styles/border.css‘

4. 300ms点击延迟
   安装fastclick: npm install fastclick --save
   main.js:
   import fastClick from ‘fastclick‘
   fastClick.attach(document.body)

5. iconfont注册、创建项目
   

header
①.使用 Stylus 辅助开发，终端中运行以下命令：
npm install stylus --save
npm install stylus-loader --save

• 注意要重新启动编译项目
  ②.合理拆分组件，提高开发效率。
  组件通过 import 方式导入
  注意要填写子组件中 export default 中的 name 属性，声明组件名称
  ③.组件中使用 stylus 编写样式