vue - src for components || router(index.js)

描述:重新编写一个组件

1.1 编写一个PrintName.vue

 1 <!--这里是模板 -->
 2 <template>
 3   <div class="hello">
 4     <h1>{{ msg }}</h1>
 5   </div>
 6 </template>
 7
 8
 9 <script>
10 export default {
11   // 本组件名称
12   name: "PrintName",
13
14   // function data => data()
15   data() {
16     return {
17       msg: "My name is Mr_L"
18     };
19   }
20 };
21 </script>
22
23 <!-- 这里添加样式,可以改为scss处理,只需要把类型一改,再配置一下即可 -->
24 <style scoped>
25 h1,
26 h2 {
27   font-weight: normal;
28 }
29 ul {
30   list-style-type: none;
31   padding: 0;
32 }
33 li {
34   display: inline-block;
35   margin: 0 10px;
36 }
37 a {
38   color: #42b983;
39 }
40 .hello {
41   color: #f00;
42 }
43 </style>

1.2  编写路由

1.3访问

不知道你有没有发现一件事情,图标也有啊!,本身App.vue就有啊(我们带过去的不过就是router-view 绑定的数据^_^)

原文地址:https://www.cnblogs.com/cisum/p/9612722.html

时间: 2024-09-30 03:54:14

vue - src for components || router(index.js)的相关文章

已配置好的vue全家桶项目router,vuex,api,axios,vue-ls,async

github 地址: https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目,统一管理后端接口 | 获取数据 | 请求数据,已包含vue-router,vuex,api,axios. webpack, 储存用vue-ls, 异步async/await, css less. 下载即使用项目开发. 喜欢或对你有帮助的话请点star??,Thanks. A Vue.js project

vue项目config/index.js中proxyTable用法

目的:在配置文件config/index.js中配置统一请求接口 在配置文件config/index.js找到 module.exports={ dev:{ proxyTable:{} } } 更改为: proxyTable:{ "/api": { target: "http://218.78.187.216/api/v1", //设置调用的接口域名和端口 changeOrigin: true, pathRewrite: { "^/api": &

Vue项目零碎知识(全局js,css配置,element-UI,bs使用, img动态配置,js数组)

全局css样式,首先在静态assets中写好文件,然后要在main.js中配置 // 配置全局css样式 // import '@/assets/css/global.css' require('@/assets/css/global.css') //上面两种都可以实现全局样式的导入,但是第二种容错率较好,更健壮,比较常用,第一种对环境要求比较高 全局js样式,也是首先要在静态assets文件中写好,然后再main.js中进行配置 // main.js //配置全局settings.js imp

介绍vue-cli脚手架config目录下index.js配置文件

1.config/index.js var path = require('path') module.exports = { build: { // production 环境 env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境 index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文件 assetsRoot: path.reso

index.js

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fmt" uri=&

[Poi] Use Poi to Build an Index.js with Modern JavaScript Features

Poi can easily launch an index.js file simply by running the poi command. This will launch a dev-server and automatically reload whenever you make changes. You can also npm install any package you need and import it right away. Install: npm install -

Redux+React Router+Node.js全栈开发

详情请交流  QQ  709639943 01.Java深入微服务原理改造房产销售平台 02.跨平台混编框架 MUI 仿豆瓣电影 APP 03.Node.js入门到企业Web开发中的应用 04.Redux+React Router+Node.js全栈开发 05.Java秒杀系统方案优化 高性能高并发实战 06.企业级刚需Nginx入门,全面掌握Nginx配置+快速搭建高可用架构 07.快速上手Linux 玩转典型应用 08.全面系统讲解CSS 工作应用+面试一步搞定 09.Java Spring

vue2.5版本源代码编译报 Could not load ..\vue\src\core/config 错误的问题

前置说明: 日期:2018年6月5日 环境:win7系统.vscode.vue2.5.0源代码 1)问题现象: D:\workspace\html5\everyday2\vue>npm run dev > [email protected] dev D:\workspace\html5\everyday2\vue> rollup -w -c build/config.js --environment TARGET:web-full-dev rollup v0.50.0bundles D:

vue 组件内引入外部在线js、css

参考:https://blog.csdn.net/u010881899/article/details/80895661 例:引入element-ui js: mounted() { const oScript = document.createElement('script'); oScript.type = 'text/javascript'; oScript.src = 'https://unpkg.com/[email protected]/lib/index.js'; document