Vue-cli单文件组件和路由和项目的初始化
以。vue结尾的文件是单文件组件，
以前是这么写Vue.conponet('childe',{
}）
什么叫做路由？就是根据网址的不同，返回不同的内容给用户
展示给用户的是APP.vue里的内容
在app.vue里
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
router就是路由，显示当前路由地址所对应的内容。
main.js里router就是路由配置里的内容
@符就是src目录。
路由的配置都放在router文件夹下的index.js文件夹里，APP.vue是整个应用的根组件。在APP.vue里，router-view是路由地址显示的路由内容，路由内容到index.js的配置项里去找。
当显示根路径的时候，展示的是首页，而不是Helloween world 单文件组件，
1.删除inde.js里的引入helloWorld的根组件
2.删除components目录，在src文件下新建一个文件夹叫pages，放网页的集合，在pages里新建一个文件夹叫home,就是首页的文件夹，在在里面新建一个home.vue文件，以vue结尾的文件是单文件组件。编辑好home.vue 后，就回到 路由，打开indexd.js文件 引入Home组件。
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
}
]
})
这段代码的意思是当用户访问根路径的时候，给路由项起一个名字叫Home，它显示的组件是Home组件
当要访问列表页的时候，展示列表页的内容 http://localhost:8080/#/list，应该怎么办呢
在路由配置里（index.js）只需要增加一项就可以了，当你访问根路径下的list页面的时候。显示一个list组件
{
path: '/list',
name: 'List',
component: List
}
然后引入List组件。在index.js里
import List from '@/pages/list/List'
如何实现点击home跳转到list页面呢
在home.vue里这么写
<template>
<div>
<div class="home">home</div>
<!--2.用div包裹这两个标签-->
<!-- 3.在页面里点击列表页就会进入list页面-->
<router-link to="/list" class="home">列表页</router-link>
</div>
</template>
为了适配不同的浏览器，需要在src/assets/styles里引入reset.css文件
文件的入口文件是main.js所以在这个文件里引入reset.css，同时还要引入border.css文件，一像素边框的解决方案。
为了解决移动端的click事件延迟300毫秒，增强用户体验，需要引入fast click库,打开终端，进入当前文件 输入npm install fastclick --save
重启项目 npm run start,再在main.js文件里引入fastclick import fastClick from 'fastclick'
在引入fastClick.attach( documnet.body)移动端的click事件延迟300毫秒就被解决了。
在移动端开发会用到一些小图标，对图标进行管理，icon 点击图标管理--》我的项目 新建一个项目。
然后删除一些无用代码。
然后把代码上传到git 在git终端里输入git add . 在输入git commit -m 'project init' 意思是项目初始化。这只是传送到本地仓库，还要上传到码云，再输入命令git push ,再打卡git官网。
在dependces里安装stylus 输入命令npm install stylus --save 把stylus包安装到stylus目录，会修改package.json ,将模块名和版本号添加到dependencies部分，还要再安装一个内容，是stylus-loader 输入命令npm install stylus-loader --save 安装好之后重新启动 npm run start
开启项目制作吧
以上是 Vue-cli单文件组件和路由和项目的初始化 的全部内容， 来源链接： utcz.com/z/376717.html
