当前位置：首页 > news >正文

JavaScript-Vue基础语法-创建-组件-路由

news 2026/2/7 20:11:10

文章目录

- 1.创建vue项目
- - 1.1.自定义创建项目
  - 1.2.项目结构解析
  - 1.3.主要文件
  - 1.4.其它
- 2.项目运行
- 3.Vue组件概念
- - 3.1.组件基础概念
  - 3.2.单文件组件三要素
  - 3.3.组件注册
  - 3.4.组件通信
- 4.Vue路由概念
- - 4.1.简单使用
  - 4.2.路由参数
  - 4.3.嵌套路由
  - 4.4.路由导航
  - 4.5.代码导航
  - 4.6.路由守卫
- 5.总结

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符，所以在模板中不能直接使用camelCase (驼峰命名法) 的 prop （myName，myAge），需要使用其等价的 kebab-case (短横线分隔命名) 命名。

1.创建vue项目

可以使用包创建，也可是使用webstorm之类的工具创建。如下图所示：
在这里插入图片描述

1.1.自定义创建项目

命令行自定义安装。使用包命令创建：
最后一个为项目名称。

vue init webpack vuedemo01

文件夹目录结构如下图所示：
在这里插入图片描述
如果想要在webstorm中启动，如下图所示配置即可：

dev 是根据package.json文件里的脚本名称而来，如果不是dev ，那么 npm run dev 命令，就是npm run serve 这样。如下图所示：

1.2.项目结构解析

├── build --------------------------------- 项目构建(webpack)相关配置文件，配置参数什么的，一般不用动 
│   ├── build.js --------------------------webpack打包配置文件
│   ├── check-versions.js ------------------------------ 检查npm,nodejs版本
│   ├── dev-client.js ---------------------------------- 设置环境
│   ├── dev-server.js ---------------------------------- 创建express服务器，配置中间件，启动可热重载的服务器，用于开发项目
│   ├── utils.js --------------------------------------- 配置资源路径，配置css加载器
│   ├── vue-loader.conf.js ----------------------------- 配置css加载器等
│   ├── webpack.base.conf.js --------------------------- webpack基本配置
│   ├── webpack.dev.conf.js ---------------------------- 用于开发的webpack设置
│   ├── webpack.prod.conf.js --------------------------- 用于打包的webpack设置
├── config ---------------------------------- 配置目录，包括端口号等。我们初学可以使用默认的。
│   ├── dev.env.js -------------------------- 开发环境变量
│   ├── index.js ---------------------------- 项目配置文件
│   ├── prod.env.js ------------------------- 生产环境变量
│   ├── test.env.js ------------------------- 测试环境变量
├── node_modules ---------------------------- npm 加载的项目依赖模块
├── src ------------------------------------- 我们要开发的目录，基本上要做的事情都在这个目录里。
│   ├── assets ------------------------------ 静态文件，放置一些图片，如logo等
│   ├── components -------------------------- 组件目录，存放组件文件，可以不用。
│   ├── main.js ----------------------------- 主js
│   ├── App.vue ----------------------------- 项目入口组件，我们也可以直接将组件写这里，而不使用 components 目录。
│   ├── router ------------------------------ 路由
├── static ---------------------------- 静态资源目录，如图片、字体等。
├── index.html ------------------------------ 	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
├── package.json ---------------------------- node配置文件，记载着一些命令和依赖还有简要的项目描述信息 
├──  .README.md------------------------------- 项目的说明文档，markdown 格式。想怎么写怎么写，不会写就参照github上star多的项目，看人家怎么写的
├── .xxxx文件：这些是一些配置文件，包括语法配置，git配置等
│   ├── .babelrc--------------------------------- babel配置文件
│   ├──  .editorconfig---------------------------- 编辑器配置
│   ├──  .eslintignore------------------------------- 配置需要或略的路径，一般build、config、dist、test等目录都会配置忽略
│   ├──  .eslintrc.js ------------------------------- 配置代码格式风格检查规则
│   ├──  .gitignore------------------------------- 配置git可忽略的文件
│   ├──  .postcssrc.js ------------------------------- css转换工具

1.3.主要文件

index.html——[主页]
index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>vuedemo01</title></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>

App.vue——[根组件]
一个vue组件通常由三部分组成:模板(template)、js(script)、样式(style)。

<template><div id="app"><img src="./assets/logo.png"><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

main.js——[入口文件]
main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例，下面的components:{App}就是引入的根组件App.vue。
后期还可以引入插件，当然首先得安装插件。全局js文件撰写的地方，在此添加js代码。

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/>'
})

router——[路由配置]
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
router文件夹下，有一个index.js，即为路由配置文件。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld}]
})

1.4.其它

可以关闭校验规则，实际使用起来比较麻烦，在index.js中关闭：

useEslint: false,

2.项目运行

命令行定位到项目总目录，运行如下命令，即可启动。

npm run dev

3.Vue组件概念

3.1.组件基础概念

官方定义：组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

组件机制的设计，可以让开发者把一个复杂的应用分割成一个个功能独立组件，降低开发的难度的同时，也提供了极好的复用性和可维护性。组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

可复用组件，高内聚、低耦合。Vue中提供了少量的内置组件(keep-alive、component、transition、transition-group等)，但可以自定义组件。Vue API中，提供了Vue.extend和Vue.component两个全局方法创建/注册组件，还有一个实例选项components，用来注册局部组件。

var myVue = Vue.extend({template: '<div>{{ name }} - {{ age }} - {{ sex }}</div>',data: function () {return {name: '小明',age: '19',sex: '男'};}
});
var extends1 = new myVue().$mount('#app');//挂载组件

3.2.单文件组件三要素

1）<template>用于展示视图：<template>模板反映了数据和最终展现给用户的DOM之间的映射关系（注：<template></template>一般只有一个<div>根元素，vue初始化之后最终会得到一个vdom树，而树结构必须要求只有一个root节点）
2）<script>用于和用户交互；
3）<style>用于控制视图的样式。

在Vue中template模板是用于编写视图(DOM)的地方，：<template></template>一般只有一个根元素，通常根元素都是div。如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素；（template标签不支持v-show指令，v-show="false"对template标签来说不起作用。）

<template><!--一般情况下只有一个根节点,且必须有一个根节点--><div><!-- view --></div>
</template>

vue中的script脚本中包含两部分，导出和导入。
style里和传统的css差不多，不同的是支持了更多的语法，比如scss、less、stylus等，默认是css。

<!--样式默认:lang="css"-->
<!--添加“scoped”-作用域，属性将CSS仅限于此组件-->
<style scoped>
</style>

3.3.组件注册

全局注册，在main.js文件中进行全局注册。

Vue.component( id, [definition] )

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

全局注册组件范例
修改main.js文件，如下所示：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'let head = Vue.extend({template: '<p>This is a head component!</p>'
})
Vue.component('tab-home', head)Vue.component('tab-new', {template: '<div>This is a News component</div>'
})Vue.component('tab-foot', {template: '<div>This is a Foot component</div>'
})
/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

修改App.vue组件：

<template><div id="app"><h1>Hello App!</h1><tab-home></tab-home><tab-new></tab-new><tab-foot></tab-foot></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

局部注册组件
通过某个Vue实例/组件的实例选项 components 注册，使用该选项注册的组件被称为局部注册。如下所示的my-component。

<template id="gg"><p>This is a advertisement component!</p>
</template><script>export default {name: 'HelloWorld',components: {'my-component': {template: '#gg'}}}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

3.4.组件通信

组件与组件之间的嵌套使用避免不了数据之间的传递。那么Vue中组件的数据是如何传递的呢？组件间数据传递不同于Vue全局的数据传递，组件实例的数据之间是孤立的，不能在子组件的模板内直接引用父组件的数据。如果要把数据从父组件传递到子组件，就需要使用props属性。在Vue中，父子组件的关系可以总结为：prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息。所以我们也会经常遇到组件之间需要传递数据的时候，大致分为四种情况：

父组件向子组件传递数据，通过 props 传递数据。
子组件向父组件传递数据，通过 events（自定义事件-回调参数）传递数据。
两个同级组件（兄弟组件）之间传递数据，通过 EventBus （事件总线-只适用于极小的项目）、Vuex（官方推荐）传递数据。详细内容通过另外文章进行介绍

4.Vue路由概念

路由是指应用程序中的一个页面。在 Vue 中，路由通常由一个组件表示。路由器是一个 JavaScript 对象，用于实现路由。在 Vue 中，路由器通常由 Vue Router 实现。路由表是一个定义应用程序中所有路由的 JavaScript 对象。路由表指定了每个路由的路径、组件和其他参数。路由参数是指在路由路径中的动态部分。路由参数可以通过 $route.params 对象访问。

4.1.简单使用

在创建 Vue 应用程序之前，你需要创建一个路由表。路由表是一个 JavaScript 对象，用于定义应用程序中的所有路由。

// src/router/index.jsimport Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';Vue.use(Router);export default new Router({mode: 'history',routes: [{path: '/',name: 'home',component: Home,},{path: '/about',name: 'about',component: About,},],
});

在上面的代码中，我们创建了一个名为 index.js 的文件，并在其中定义了一个路由表。该路由表由两个路由组成：一个用于主页（路径为 /）和一个用于关于页面（路径为 /about）。每个路由都指定了一个名称、一个组件以及其他参数（例如路径）。

4.2.路由参数

路由参数是指在路由路径中的动态部分。例如，在以下路由中：

{path: '/users/:id',component: User,
}

:id 是一个路由参数。你可以通过 $route.params.id 访问该参数的值。例如，如果 URL 是 /users/123，则 $route.params.id 的值将是 123。

4.3.嵌套路由

嵌套路由是指一个路由中包含另一个路由。例如，以下路由表定义了一个名为 User 的父路由和一个名为 Profile 的子路由：

{path: '/user/:id',component: User,children: [{path: 'profile',component: Profile,},],
}

在上面的代码中，User 路由包含一个名为 Profile 的子路由。当导航到 /user/:id/profile 时，将渲染 Profile 组件。

4.4.路由导航

在 Vue 中，路由导航是指在路由之间进行切换。你可以使用元素或编程方式导航到一个路由。元素是一个 Vue 组件，它允许你在应用程序中创建链接。例如：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

在上面的代码中，我们使用元素创建了两个链接，一个指向主页，一个指向关于页面。

4.5.代码导航

你也可以使用编程式导航在路由之间进行切换。要导航到一个路由，你可以使用 $router.push() 方法。例如：

this.$router.push('/');

在上面的代码中，我们使用 $router.push() 方法将当前路由切换到主页。

4.6.路由守卫

1.全局守卫
路由守卫是指在路由导航期间执行的操作。你可以使用路由守卫来控制路由导航、检查用户身份验证以及执行其他操作。全局路由守卫是指在所有路由导航期间执行的操作。你可以使用全局路由守卫来执行通用操作（例如检查用户是否已登录）。

const router = new VueRouter({ ... });router.beforeEach((to, from, next) => {// 检查用户是否已登录if (!isAuthenticated && to.path !== '/login') {next('/login');} else {next();}
});

在上面的代码中，我们使用 router.beforeEach() 方法注册了一个全局路由守卫。该守卫检查用户是否已登录，如果没有登录，则将路由导航到登录页面。

2.局部守卫
路由局部守卫是指在单个路由导航期间执行的操作。你可以使用路由独享守卫来控制单个路由的导航。

const router = new VueRouter({routes: [{path: '/dashboard',component: Dashboard,beforeEnter: (to, from, next) => {// 检查用户是否有权限访问该路由if (!hasPermission) {next('/unauthorized');} else {next();}},},],
});

3.组件内守卫
组件内守卫是指在组件导航期间执行的操作。你可以使用组件内守卫来控制组件的导航。

export default {beforeRouteEnter(to, from, next) {// 在进入该组件之前执行操作next();},beforeRouteLeave(to, from, next) {// 在离开该组件之前执行操作next();},
};

在上面的代码中，我们在一个组件中使用了 beforeRouteEnter 和 beforeRouteLeave 守卫。这些守卫允许我们在进入和离开该组件之前执行操作。

5.总结

Vue的组件渲染目标视图，或者局部视图，它的路由，是对各种访问路径的控制，生成目标渲染结果。