Vue-cli单文件组件和路由和项目的初始化

àì夳堔傛蜴生んèń 2022-05-24 02:52 168阅读 0赞

以。vue结尾的文件是单文件组件，

以前是这么写Vue.conponet('childe',\{

\}）

什么叫做路由？就是根据网址的不同，返回不同的内容给用户

展示给用户的是APP.vue里的内容

在app.vue里

</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组件

![20180518214550246][]

当要访问列表页的时候，展示列表页的内容    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>

![20180518222330255][]

为了适配不同的浏览器，需要在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

开启项目制作吧

[20180518214550246]: /images/20220524/394de01254674f2eb5a924dcd9ac9508.png
[20180518222330255]: /images/20220524/2da3a31ffd5c45d19a095136142325a1.png