完整教程：零基础入门 Vue.js：项目创建、组件开发与路由管理
vue简介
[!attention] No Reproduction Without Permission
Made By Hanbin Yi
本文涵盖 Vue.js 基础与实战：先介绍其为渐进式 JavaScript 框架，再讲 Vue CLI 创建项目的终端操作、目录结构及启动指令；对比 Vue 2 Options API 与 Vue 3 Composition API 语法，详解插值、v-bind 等核心指令及组件开发流程；还包含 Element UI 安装、Vue Router 配置（含二级路由）与跳转方式，结合表格渲染案例，为 Vue 开发提供从基础搭建到实战应用的指引。（适合vue 0基础）
Vue（通常称为 Vue.js）是一套用于构建用户界面的渐进式 JavaScript 框架，由尤雨溪于 2014 年推出，目前已成为前端开发中最流行的框架之一。它的核心特点是易学易用、灵活高效，既可以用于构建小型交互组件，也能支撑复杂的单页应用（SPA）开发。
创建项目
进入文件夹目录下
cd 文件夹名[!TIP]
选择所要创建的文件夹目录下
创建项目
vue create 文件夹名[!TIP]
vue 文件将会创建在这个文件夹名下
出现如下图所示即为成功
导入vscode
[!TIP]
将目录下新生成的vue项目文件夹拉入vscode. (一定要项目根目录)
运行vue项目
终端可通过系统自带或vscode的终端
[!IMPORTANT]
在终端下进入新生成的vue项目文件夹
然后输入指令
npm run serve
[!WARNING]
若package.json下启动配置为dev 则使用启动命令为
npm run dev
[!NOTE]
补充：vscode终端开启方法
vue项目文件夹介绍
vue项目前操作
文件结构（vue2 与 vue3）
1. Composition API vs Options API
Vue 2 主要使用 Options API，这是一种基于类的组件风格，其中组件的选项（如 data、methods、computed 等）被定义在组件的选项对象中。
Vue 3 引入了 Composition API，这是一种基于函数的 API 风格，允许开发者以更灵活的方式组织和复用代码。Composition API 通过 setup() 函数使用，可以更好地处理逻辑复用和状态管理。
2. <script> 标签的变化
在 Vue 2 中，通常在 <script> 标签中直接使用 Options API：
{{ message }}
<script>
export default {
data() {
return {
message: 'Hello Vue 2'
};
}
}
</script>在 Vue 3 中，你可以在 <script> 标签中使用 Composition API:
{{ message }}
<script>
import { ref } from 'vue';
export default {
setup() {
const message = ref('Hello Vue 3');
return { message };
}
}
</script>导入配置包（有的可忽略）
终端命令
npm i关闭eslink的语法检查
修改配置文件需重启项目
新vue文件的引入注册使用
新建的vue文件（在commponents文件夹下）text.vue
在App.vue中引入注册使用
格式认识
components下text.vue文件
html代码区
js代码区
<script>
new Vue({
//通过选择器提供指定挂载点
el:'#root',
//数据存放
data(){
return{
msg:"看看我有没有在页面上",
url:"https://cn.vuejs.org/guide/quick-start"
}
}
});
</script>
css代码区
<script>
export default {
//数据存放
data(){
return{
msg:"看看我有没有在页面上",
url:"https://cn.vuejs.org/guide/quick-start"
}
}
}
</script>上面两种方法
Vue 组件导出方式（export default）
直接创建 Vue 实例方式（new Vue()）
项目架构差异
export default更适合大型项目，通过组件化开发提高代码复用性new Vue()更适合小型项目或快速原型开发，直接创建根实例即可运行
暴露与引入
[!WARNING]
引入 注册 使用格式见下方新vue文件的引入注册与使用
方法一
暴露
export default{
name : "张三",
age :18
};引入
import obj from "./exporttext"; //from 暴露的文件
console.log(obj)方法二
暴露
let obj = {
name : "张三",
age :18
};
export default obj; //将obj暴露出引入
import obj from "./exporttext"; //from 暴露的文件
console.log(obj)vue指令
<script>
new Vue({
//通过选择器提供指定挂载点
el:'#root',
//数据存放
data(){
return{
msg:"看看我有没有在页面上",
url:"https://cn.vuejs.org/guide/quick-start"
}
}
});
</script>
v-html
v-html的作用是将绑定表达式的值作为 HTML 内容插入到所在的 DOM 元素中，支持解析标签。双引号里不能直接放置需要显示的字符串内容。
<script>
new Vue({
el:'#root',
data:{
msg:'文本
'
}
})
</script>v-text
可以向所在标签中插入文本，无法解析标签
初始文本
<script>
new Vue({
el:'#root',
data:{
msg1:'文本'
}
})
</script>[!TIP]
他的效果类似于插值表达式{{msg1}}，但插值表达式可以进行拼接，而v-text拿到msg1的值后会完全覆盖掉整个div的内容。
v-show
控制元素的显示、隐藏。
等价于为元素添加display：none是视觉上的隐藏，适用于需要频繁切换显示隐藏的时候。
引号内表达式为true显示，为false隐藏。
文本v-if
控制元素的显示、隐藏。
等价于创建、删除元素，在结构上消失。适用于不频繁显示隐藏。
引号内表达式为true显示，为false隐藏。
文本v-else 与 v-else-if
控辅助v-if判断渲染。必须紧跟v-if否则无效。
他会按照顺序依次执行，一旦满足某个条件，就会渲染对应元素，并且不会对后续的条件进行判断，即使下面的判断有成立的。
文本1
文本2
<script>
new Vue({
el:'#root',
data:{
num:10
}
})
</script>v-bind 单向数据绑定
基础语法
![示例图片]()
![示例图片]()
例如
<script>
new Vue({
el:'#root',
data:{
num:'111'
}
})
</script>[!IMPORTANT]
当data中数据发生变化时，输入框内容发生改变；当输入框内容改变时，data中的数据不发生改变。
这是因为v-bind是单向数据绑定，数据只能从data—>绑定元素
v-model 双向数据绑定
主要服务于表单元素（有value值），进行双向数据绑定，可以快速获取或设置表单元素内容。
当data中数据变化，视图自动更新。
当视图变化，data中数据自动更新。
写法：v-model:属性="值" v-model="值"
//v-model默认绑定valuev-for
v-for 是 Vue 中用于循环渲染列表数据的指令，它可以基于数组或对象重复渲染元素
遍历
语法：v-for="value in object" 或 v-for="(value, key) in object" 或 v-for="(value, key, index) in object"
value：对象属性值key：对象属性名index：遍历索引
-
{{ item }}
<script>
new Vue({
el: '#root',
data() {
return {
fruits: ['苹果', '香蕉', '橙子']
}
}
})
</script>重要注意事项：key 属性
- 必须为
v-for渲染的每项提供唯一的:key属性（推荐使用数据的唯一标识，如 ID） - 作用：帮助 Vue 高效更新 DOM，避免渲染错误
{{ item.name }}
{{ item.name }}
v-on 事件处理
基本语法
v-on是用于监听 DOM 事件的指令，它可以绑定事件监听器到元素上。当指定的事件触发时，会执行对应的 JavaScript 代码或方法
//可直接使用data中数据
v-on所调用的方法，在vue实例的methods中声明，最终会在vm上。并且当要使用data中的数据时，需要用this指向对应的vue实例，即：this.属性
{{count}}
<script>
new Vue({
el: '#root',
data: {
count: 1
},
methods: {
handleClick() {
this.count++
}
}
})
</script>综合案例
id
name
age
gender
status
control
{{item.id}}
{{item.name}}
{{item.age}}
{{item.gender}}
{{item.status?"正常":"禁用"}}
姓名
年龄
性别
<script>
export default {
data (){
return{
name:null,
age:null,
gender:null,
flag:false,
currectItem:null,
tableData: [
{ id: 1, name: "张三1", age: 18, gender: "女", status: 0 },
{ id: 2, name: "李四", age: 30, gender: "男", status: 1 },
{ id: 3, name: "王五", age: 18, gender: "女", status: 0 },
{ id: 4, name: "赵六", age: 20, gender: "男", status: 1 },
{ id: 5, name: "小六", age: 40, gender: "男", status: 1 },
]
}
},
methods:{
changeStatus(item){
if(item.status == 0){
item.status = 1;
}else{
item.status = 0;
}
},
changeButtun(item){
this.flag = true;
this.name = item.name;
this.age = item.age;
this.gender = item.gender;
this.currectItem = item;
},
changeAffirm(){
this.currectItem.name = this.name;
this.currectItem.age = this.age;
this.currectItem.gender =this.gender;
this.flag = false;
},
changeCancle(){
this.flag = false;
}
}
}
</script>
Elementui组件库
适配vue2
https://element.eleme.cn/#/zh-CN/component/installation
安装
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S完整导入
在 main.js 中写入以下内容：
import Vue from 'vue';
import ElementUI from 'element-ui'; //添加行
import 'element-ui/lib/theme-chalk/index.css'; //添加行
import App from './App.vue';
Vue.use(ElementUI); //添加行
new Vue({
el: '#app',
render: h => h(App)
});以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
Vue Router 路由
在Vue中，路由是指用来管理应用程序中不同页面之间切换和导航的机制。它允许我们根据不同的URL路径，动态地加载和显示不同的组件内容。
Vue中的路由可以通过[Vue Router](https://so.csdn.net/so/search?q=Vue Router&spm=1001.2101.3001.7020)来实现。Vue Router是Vue官方提供的一个插件，它提供了一种声明式的方式来定义路由和导航。
[!CAUTION]
通过路由，我们可以实现在Vue应用中的页面导航和切换，并能够动态加载不同的组件内容。这样可以实现更好的用户体验，使得应用程序更加灵活和可扩展。
route：表示单个路由。
routes：表示多个路由的集合。是一个数组，在这个数组中包含了多个route。
router：译为路由器，是route、routes的管理者。Vue Router路由的组成
Vue Router路由由以下几个重要的组成部分组成：
路由实例（Router Instance）：
创建一个Vue Router实例，用于管理应用程序的路由。
路由映射表（Route Mapping）：
在路由实例中设置路由映射表，即定义URL路径与对应的组件之间的关系。路由映射表是一个包含路由对象的数组，每个路由对象由以下几个属性组成：
path：定义URL路径，可以是字符串或者正则表达式。name：路由名称，用于标识路由。component：对应的组件，当路径匹配时，将渲染该组件。redirect：重定向路径，在访问某个路径时，自动重定向到其他路径。children：定义嵌套路由。[详细见二级路由]
路由出口（Router View）：
使用 <router-view> 标签作为路由的出口，用于渲染匹配到的组件。
路由链接（Router Link）：
使用 <router-link> 标签作为路由的链接，用于生成可点击的链接，通过点击链接切换路由。
导航守卫（Navigation Guards）：
Vue Router提供了多个导航守卫钩子，用于在路由导航过程中拦截或者影响导航行为。例如，beforeEach、beforeResolve、afterEach等。
通过以上组成部分，我们可以在Vue应用中实现前端路由的功能，通过定义路由映射表来控制页面的切换和加载不同的组件。同时，导航守卫可以让我们在路由切换前后执行一些逻辑，例如检查用户权限、验证用户登录状态等。
路由的搭建
版本注意
[!WARNING]
Vue2->v3.x
vue3->v4.x
终端窗口命令
npm install vue-router 默认最新 需指定版本
npm install vue-router@版本号
简写：npm install vue-router@3.6.5
npm view vue-router version 查看所有版本创建页面（路由） 路由存放
src/pages
或 src/views
一般组件与路由组件
[!TIP]
路由组件通常存放在pages文件夹，
一般（普通）组件通常存放在components文件夹。
一般（普通）组件需要1.引入2.注册3.使用
配置路由信息
src/router/index.js
//引入vue
import Vue from 'vue'
//引入VueRouter
import VueRouter from 'vue-router'
//注册或使用
Vue.use(VueRouter)
//配置路由数组
//vue 中 @符表示从src开始访问选择的文件夹
//path 表示 路径与文件绑定
const routes = [
{name:"login",path:"/login",component:() => import("@/文件名.vue")}
{name:"sign",path:"/sign",component:() => import("@/文件名.vue")}
]
//创建路由实例对象
const router = new VueRouter({
routes
})
//暴露
export default router;引入router
main.js
在Vue入口文件（main.js）中 引入Vue Router 并使用它:
//该文件是整个项目的入口文件
//引入vue，相当于以前在html中引入了vue.js
import Vue from 'vue'
//引入app组件，它是所有组件的父组件，App组件的父组件是vm，即：一人之下万人之上
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
import router from "@/router";//引入router (执行步骤)
//创建Vue实例对象————vm
new Vue({
router,//引入router（执行步骤）
//render函数：用于把App组件中的template模板结构，渲染到页面中，即将App组件放入到容器中
render: h => h(App),
}).$mount('#app')//该行代码一样可以写在new Vue({el:'#app'}})使用路由
App.vue中引入路由
进行展示路由
<template>
<div id="app">
<!-- 展示一级路由 -->
<router-view></router-view>
</div>
</template>[!NOTE]
我们可以使用Vue Router提供的
<router-link>组件来生成路由链接，使用<router-view>组件来显示当前路由对应的组件。
[!CAUTION]
详情见路由跳转
二级路由
在 Vue 路由中，二级路由指的是嵌套在「一级路由」内部的路由，简单说就是 “页面中的页面”。它的作用是在同一个一级路由页面（比如首页）中，通过切换二级路由展示不同的内容（比如首页的 “推荐”“热门”“最新” 板块），而不需要重新加载整个一级路由页面。
举个生活例子理解
假设你打开一个电商网站的「首页」（这是一级路由），首页里有 “精选商品”“限时折扣”“新品上市” 三个板块。这三个板块的内容不会单独占用一个全新的页面，而是在「首页」这个大框架里切换展示 —— 这三个板块对应的路由就是二级路由，它们嵌套在「首页」这个一级路由内部。
二级路由的核心特点
- 嵌套关系：必须依赖一个一级路由存在，不能单独使用。
- 共享布局：二级路由的内容会显示在一级路由页面的指定位置（通常是通过
<router-view>标签占位）。 - URL 结构：二级路由的 URL 会拼接在一级路由后面，格式为
一级路由路径/二级路由路径。例如：/home/recommend（/home是一级路由，/recommend是二级路由）。
具体步骤
二级路由配置
index.js中添加对应父路由的子路由
通过 children 属性定义二级路由，嵌套在一级路由的配置里。
import Vue from "vue";
import VueRouter from "vue-router";
// import { component } from "vue/types/umd";
Vue.use(VueRouter);
//定义
const routes = [
{name:"login",path:"/login",component:() => import("@/pages/login.vue")},
{name:"card",path:"/card",component:() => import("@/pages/card.vue")},
{name:"sb",path:"/sb",component:() => import("@/pages/sb.vue"),
//嵌套操作
children:[
{name:"bsb",path:"bsb",component:() =>import("@/pages/bsb.vue")},
]
}
]
//实例化路由对象
const router = new VueRouter({
routes
})
//暴露路由
export default router;[!WARNING]
子路由（children中）path 不需要斜杠
二级路由显示
在一级路由中添加<router-view> 表示二级路由的显示位置
[!CAUTION]
在 Vue 中使用二级路由时，不需要在父组件（一级路由组件）中手动导入和注册二级路由组件，因为路由组件的注册和管理是由 Vue Router 统一负责的。
在app.vue 清除边距 占满body
路由跳转
<router-link>更适合静态导航
比如导航栏、菜单等固定在页面上的链接，直接在模板中声明即可，无需写额外逻辑。
它会自动处理激活状态（添加router-link-active类），方便做样式高亮。- 编程式跳转更适合动态场景
比如点击按钮后先验证表单，通过后再跳转；或者根据接口返回结果决定跳转到不同页面。
示例（条件跳转）
[!CAUTION]
- 简单说：
<router-link>是 “写在 HTML 里的跳转”，适合固定链接；编程式跳转是 “写在 JS 里的跳转”，适合需要逻辑判断的动态场景。- 本质上两者最终都会触发路由系统的跳转，核心区别在于使用方式和适用场景，而非功能优劣。
声明式跳转
点击<router-link>组件时，路由会自动切换到指定的路由，并将对应的组件渲染到<router-view>组件中。
是模板语法中的标签，通过 HTML 标签直接定义导航，用法类似普通 <a> 标签，但会被 Vue 路由处理为单页应用的无刷新跳转。
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<!--指定展示位置-->
<router-view></router-view>
</div>
</template>编程式跳转
通过 JavaScript 代码调用路由实例的方法实现跳转，需要在组件的方法中使用。
// 跳转到指定路由
this.$router.push('/home')
// 带参数的跳转
this.$router.push({
path: '/user',
query: { id: 1 }
})
// 登录成功后跳转首页
login() {
if (this.form.valid) {
this.$router.push('/home')
}
}
浙公网安备 33010602011771号