Vue脚手架基础（单文件组件与路由）

最新推荐文章于 2023-09-21 13:58:48 发布
最新推荐文章于 2023-09-21 13:58:48 发布
阅读量161 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zh15930366635/article/details/123668462
版权

一、单文件组件

图中此文件就是一个单文件组件。

这个文件在main.js中引用

 

单文件组件内部可分为三部分：

（html部分、css部分和js部分）

 单文件组件建议创建在components文件夹中

 

二、脚手架中的路由

        首先要在你的项目文件中找到router文件夹和views文件夹

 

在views文件夹中写入你要写的路由（也就是局部组件）

 在App.vue中写进vue组件

 如果最后你的路由没有显示可能是因为你vue组件后面没有加

 <router-view />

在router文件夹的index.js文件中引入路由并且编写规则

 

苏清辞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue单文件组件实现路由跳转
guowenf的博客
04-25 1761
前期实现了以下两个功能： 单文件组件实现添加删除列表 单文件组件实现列表查询功能 本文接着上述功能实现路由之间的跳转，效果如下 Vue路由 1、引入路由 npm install vue-router --save 2、基本概念 2.1 route 指一条路由，以对象的形式设定，在其中指定路由已经名称 等信息 { path: '/hello', name: 'HelloWorld',compo...
Vue单文件组件和路由
AsaZyf的博客
11-21 371
单文件组件 路由配置 路由出口【显示】
08.Vue单文件组件的路由
wl516372370的博客
06-02 218
单文件路由一、创建Vue项目 一、创建Vue项目 注意需要以管理员身份运行开发软件，这里我使用到的是webStrom。 1.在src目录下创建router文件夹，里面新建一个index.js； 2.新建需要用到的组件； 红框内的是构建单文件路由需要用到的文件。 1.index.html 是唯一需要用到的一个html，它作为 #app的存放容器，暂不需要在里面添加内容。 2.FirstVue.vue、SecondVue.vue是创建的两个单文件组件点击查看单文件组件的基本用法。 ...
路由的创建和使用（单文件组件）
weixin_50641294的博客
03-04 255
路由的创建和使用（单文件组件） 1.创建一个js文件，最好放在utils目录 // 引入vue import Vue from 'vue'; // 暴露并创建vue实例 export default new Vue(); 2.创建一个js文件，放在router目录下 // 1.工程化 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); //3. 引入组件 import Ind.
单文件组件与Vue中的路由
VVVZCS的博客
09-05 999
打开Vue默认项目夹，然后进入到main.js里面，它是整个项目的入口文件 el表示挂载到id等于app的元素上 然后再点开index.html文件当中 这个Vue就是挂载到这个div上 components: { App } 等于 components: { App ：APP }，就是定义一个局部组件的使用，这是一种es6的写法，当你键和值一样的时候，写一个就可以了，App其实就...
解决vue脚手架项目打包后路由视图不显示的问题
10-18
2. **路由基础路径设置错误**：Vue Router中的`base`选项用于指定应用的基础URL，当项目部署在非根目录下时，这个配置尤为重要。如果不正确设置，Vue Router可能找不到对应的组件进行渲染。 针对以上问题，解决方法...
Vue-cli3开发单文件组件
06-21
本课程基于ES6来学习Vue的整个API，其中包含Vue基础API、Vue组件化开发、Vue组件通信、官方脚手架Vue-cli3的使用、Vue-devtools的使用 、element-ui第三方组件的使用、手把手带你打造自己的表单组件、Vue核心插件之...
vue脚手架（纯净版）
07-10
"vue脚手架（纯净版）"通常指的是剥离了某些非必要插件或预设，只保留基础功能的CLI版本，以满足对项目初始化有特定需求的开发者。 Vue CLI 的主要功能包括： 1. **快速创建项目**：通过简单的命令行操作，如`vue ...
vue脚手架vue脚手架vue脚手架vue脚手架vue脚手架
04-26
Vue脚手架（Vue CLI）是Vue.js官方提供的一个命令行工具，用于快速搭建 Vue 项目，它极大地简化了项目的初始化过程，帮助开发者设置和配置项目环境，提高开发效率。 Vue CLI 提供了丰富的预设选项，包括Webpack配置...
vueCli脚手架工程文件模板
11-10
在“vueCli脚手架工程文件模板”中，我们通常会看到以下关键组件和目录： 1. **package.json**：这是项目的配置文件，包含了项目依赖、脚本、作者信息等。`dependencies`和`devDependencies`分别存储生产环境和开发...
6-3 单文件组件与Vue中的路由
pb951028的博客
08-12 337
打开项目 进入src main.js index.html 当一个文件以vue结尾的时候，我们把这种文件叫做单文件组件 根据网址的不同，返回不同的内容给用户 &lt;view-router&gt;显示当前路由地址所对应的内容 在入口文件里引入了一个router变量，然后在创建根实例的时候，使用了这个router变量 router index.js最终导出去的就是一组路由的配置项...
Vue.js 2.0 由浅入深，第三天 day03
weixin_33862993的博客
07-26 143
## 一、 组件component### 1. 什么是组件？ 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码 组件是自定义元素（对象）### 2. 定义组件的方式 方式1：先创建组件构造器，然后由组件构造器创建组件 方式2：直接创建组件### 3. 组件的分类 分类：全局组件、...
vue项目没有router文件夹_新版的vue cli默认没有自动创建router.js 和 store.js
weixin_39602560的博客
12-30 4131
router.jsimport Vue from 'vue'import Router from 'vue-router'import Index from './views/Index.vue'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'index',component: Index},{path: '...
Vue项目 - 单文件组件和Vue中的路由
kaven
12-07 740
推荐：Vue汇总 Vue项目 - 单文件组件和Vue中的路由 什么是单文件组件 在之前的博客中，博主使用Vue.component来定义全局组件，紧接着用new Vue({ el: '#container '})在每个页面内指定一个挂载点。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>组件</title> <script sr
【路由规则通信】Vue中单级路由用法
qq_63656102的博客
04-24 158
在原生js中我们按钮切换的时候会有一个抖动问题，但是要解决这个问题，我们在之前是没有很好的办法解决的，我们在原生js中要实现按钮分别不同跳转，那么必须得准备按钮所对应的页面，这样会导致一个问题，如果我们的按钮很多那么所对应的页面也会要准备很多，而且代码的重复量很高，所以后期维护起来也很难。
Vue的单文件组件（Single File Components）：优势与实例
最新发布
stormjun的博客
09-21 1914
单文件组件是 Vue.js 中用于构建用户界面的基本单位。模板（Template）：定义了组件的结构，通常使用 HTML 标记和 Vue.js 的模板语法编写。脚本（Script）：包含了组件的逻辑，可以使用 JavaScript 编写，也可以包括 Vue.js 的选项设置、数据和方法。样式（Style）：用于指定组件的样式，通常使用 CSS 或预处理器编写，如 SASS 或 LESS。这三个部分通常被包装在一个以.vue为扩展名的文件中，例如。
Vue组件化开发-单文件组件
m0_55990909的博客
04-04 1392
单文件组件 1、单文件组件 1.在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。 2.这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显： 全局定义 (Global definitions) 强制要求每个 component
Vue项目预热-单文件与Vue中的路由（6-4）
罗彬桦的博客
02-25 84
单文件与Vue中的路由 main.js components: { APP } 相当于components: { APP:APP }，是ES6的写法省略了。 import App form ‘./App’，./代表的是在src文件下的。又因为App后面没有跟任何的后缀，其实相等于会默认的一些后缀里面选择。比如说有没有App.vue，App.js，App.json。 App.vue 这部分展示的代码就是App.vue 那如果我将代码删除干净。 怎么还会有多余的字？ 路由 路由就是根据网址的不同，返回
sonar 扫描vue目录_2020最新vue项目目录详解（超详细）
weixin_39952031的博客
10-27 508
山西软通乐学常亮带你去详解vue项目目录​node_modules：存放npm命令下载的开发环境和生产环境的依赖包。Public：public目录存放的是一些公用文件，比如初始创建时，public目录中有两个文件，一个是图标，一个是通用的错误页面：看index.html文件可以判断出，这是用于当浏览器不支持JavaScript脚本时的提示页面。​src下assets：存放项目中需要用到的资源文件，...
Vue基础入门：项目创建、组件与路由
在`router/index.js`中，引入其他子组件，如`import Home from '../views/Home.vue'`，并将它们注册为路由。`<router-link>`用于导航，例如`<router-link to="/">Home</router-link>`和`<router-link to="/about">...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值