Vue 项目结构(五)

最新推荐文章于 2020-12-14 23:12:32 发布

一个爱浪费时间的人

最新推荐文章于 2020-12-14 23:12:32 发布

阅读量215

点赞数

分类专栏： vue 文章标签： vue

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_33248299/article/details/102551711

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一.环境配置

安装node.js和git
命令行执行node -v出现版本号就说明node安装成功
命令行执行npm -v查看npm是否安装成功，npm是安装工具
命令行git --version查看git是否安装成功
去github或者码云线上创建一个项目，弄好了公钥上传下载就不需要密码了
git bash(小型的linux操作系统)执行git clone 项目的ssh地址，会把线上代码克隆到本地
通过vue官网命令行工具安装vue-cli，等待安装成功

npm install --global vue-cli

创建一个基于webpack模板的项目，webpack是前端目前最流行的打包工具

vue init webpack 你下载的项目名

之后进行一系列的选项，等待下载依赖
在这里插入图片描述

初始化完成后，进入你从线上下载的项目文件夹，运行如下操作，自动化打包

npm run dev

在这里插入图片描述
访问这个地址就打开这个项目了

此时你会发现项目出现的新文件，上传到线上

git status //查看状态
git add . //运行到缓冲区
git commit -m ‘描述’ //提供到本地仓库
git push //推送到线上，远程仓库

二.项目代码介绍

在这里插入图片描述

说多了，配置很少改，主要的还是关心src下的源代码

三.单文件组件与Vue中的路由

1.单文件组件

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>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js
这里的vue实例挂载到index.html上的div，先不管路由，这里用的一个局部组件
在es6里面键和值一样写一个就行了，模板用的就是App这个局部组件

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App组件是导入进来的，其实找的就是App.vue文件内的内容
可以分为三个部分
以vue结尾的文件叫做单文件组件，放的就是vue组件
以前用组件都是Vue.component(‘xx’,{

})这种形式写的

单文件组件和以前组件定义不一样了，模板放在了template标签里面了，组件逻辑放在script里面了，组件样式放在了style里面
首页是不是App组件的内容？测试后发现就是，删光除路由外(router-view)的所以内容发现还有东西

2.路由

就是根据网址的不同，返回不同的内容给用户
根据url给用户返回不同的页面，这就是路由的功能
来实现一个例子吧，访问根目录就welcome页面，访问list目录就返回一个列表
页面剩下的内容来自于这个标签，router-view显示的是当前路由地址所对应的内容

在这里插入图片描述

这里的router也是router:router
router的index.js就是路由的配置
这就是一组路由配置项，访问根路径的时候，对应的内容是HelloWorld，HelloWorld在components下的HelloWorld，@符号是src目录下

在这里插入图片描述

也是一个单文件小组件，返回路由index.js，直接可以理解为访问根路径，给用户返回HelloWorld这个组件
App.vue又写了router-view，router-view展示当前路由地址对应的内容，也就是展示HelloWorld这个组件
其实router-view展示的就是HelloWorld这个组件

在这里插入图片描述

弄清楚就可以自己来尝试写下
Home.vue

<template>
    <div>
      Home
    </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style>

</style>

List.vue

<template>
     <div>
       List
     </div>
</template>

<script>
export default {
  name: 'List'
}
</script>

<style>

</style>

index.js配置路由

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import List from '@/pages/list/List'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/list',
      name: 'List',
      component: List
    }
  ]
})

App.vue

<template>
  <div id="app">
    <!--    显示的是当前路由地址所对应的内容-->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

访问http://localhost:8080/#/就跳转Home，访问http://localhost:8080/#/list就跳转到List

四.单页应用VS多页应用

1.多页应用

每次页面跳转，后台服务器都会返回一个新的html文档
只经过了一次http请求

2.单页应用

在这里插入图片描述

vue提供了服务器渲染技术，完美解决单页应用的问题，解决了这些，单页应用对前端来说是完美的开发方案
vue不用a标签做跳转，用router-link
来说一个例子吧，在路由Home加一个跳转按钮
注意，template里面只能暴露一个根标签，所以用div包裹到

<template>
  <div>
    <div>
      Home
    </div>
    <router-link to="/list">按钮</router-link> 
     </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style>

</style>