项目初始化安装准备
- 安装node 以及 npm。
- 使用码云平台,创建仓库及项目,接着使用Git命令:git clone将项目克隆到本地。
- 全局下安装Vue-cli(脚手架),使用以下命令:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
- 使用打包工具webpack,运行命令:
vue init webpack 项目名称
。
项目重点概念了解
- 单文件组件
以.vue
结尾的文件是一个单文件组件。它由三个部分组成,分别是
(1)<template>
:模板
(2)<script>
:逻辑
(3)<style>
:CSS样式
最后,单文件组件以import
的形式导入 - 路由:根据网址的不同,返回不同的页面给用户。
在App.vue中,<router-view/>
显示的是:当前路由地址所对应的内容。即对应router文件下的index.js。
可以设置访问根路径“/”时,对应的组件内容。 - 单页应用 & 多页应用
(1)单页应用:
即单页应用,页面跳转时,JS动态地删除当前页面的内容,然后将新的页面DOM结构渲染出来。
在Vue中,页面的跳转使用:<router-link to="/list">列表页</router-link>
(2)多页应用:
多页应用,页面跳转时,后端返回新的HTML页面。
项目初始化前期准备
- 设置移动端不能通过手机放大缩小:在index.html中meta中的设置如下
<meta name="viewport" content="width=device-width,initial-scale=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
- 初始化样式的统一,为了保证不同浏览器显示效果一样:在assets/styles文件夹下,导入reset.css文件,并在main.js中导入。
import './assets/styles/reset.css'
- 解决移动端1像素在多倍屏中显示多像素的问题:在assets/styles文件夹下,引入border.css文件,并在main.js中导入。
import './assets/styles/border.css'
- 解决移动端点击时有300ms延迟的问题:安装fastclick
首先,在相应的文件目录下执行以下命令进行安装
npm install fastclick --save
接着,在main.js中引入fsatclick,并使用:
import fastclick from 'fastclick'
fastclick.attach(document.body)
- 通过iconfont官网配置项目的icon,在iconfont官网创建相应的项目。
- 最终配置完成代码后,通过以下git指令将代码初次推送至线上同步。
git add . //将本地修改添加到本地git的缓存区
git commit -m 'project init' //把文件提交到仓库,并携带‘project init’这个信息
git push //将文件推送至仓库