【vue】import的使用

以下是vue默认模板结构,自动加载HelloWorld

(1)@ 等价于 /src 这个目录,避免写麻烦又易错的相对路径,是在webpack.base.config.js里面配置好别名

(2)import VueRouter1 from ‘vue-router‘  含义:将vue-router模块中的对象赋值给VueRouter1变量

(3)import router2 from ‘./router‘ 含义:将router目录的对象赋值给router2变量

(4)router:router2, 由于将变量名写为了router2,因此不能用简写模式,直接写一个router

目录结构:

index.js

import Vue from ‘vue‘
import VueRouter1 from ‘vue-router‘
import HelloWorld from ‘@/components/HelloWorld‘

Vue.use(VueRouter1)

export default new VueRouter1({
  routes: [
    {
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component: HelloWorld
    }
  ]
})

main.js

import Vue from ‘vue‘
import App from ‘./App‘
import router2 from ‘./router‘

Vue.config.productionTip = false

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

原文地址:https://www.cnblogs.com/dongzhuangdian/p/9490923.html

时间: 2024-11-09 04:54:27

【vue】import的使用的相关文章

[Vue] Import component into page

Components are one of the most powerful features of Vue. Let's take a look at how to write our first components and make use of them in a parent component. Create a component: // item-description.vue <template> <h1> This is item description &l

Vue

1.Vue单页面使用路由 1>跳转路由给url中添加参数:router.push({ name: 'Paymethod', query:{m:true}}); 2>跳转后获取url中的参数:this.$route.params.query.m. 3>vuex中有四个文件:action.js----->mutations.js----->state.js----->store.js 步骤一:在store.js中定义好状态树 export default { menu:nu

Vue.js之UI组件elementUI——MintUI

目的: 为了提高开发效率 功能 原则: 拿过来直接使用 vue-cli  ->  vue-loader bower 前端包管理器 jquery#1.11.1 自动解决依赖npm node包管理器 [email protected] 饿了么团队开源一个基于vue 组件库 elementUI: 如何使用 官网:http://element.eleme.io/使用:1. 安装 element-ui npm i element-ui -D npm install element-ui --save-de

[Vue + TS] Using Route events inside Vue

vue-router introduces new hooks into the component. In this lesson we’ll show you how to use these new hooks in your class based Vue components in TypeScript. We’ll also go over how we can create and use routes in Vue. Default component: <template>

vue路由跳转时判断用户是否登录功能

通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha

vue学习笔记——目录结构介绍(二)

1.初始目录结构如下: 2.目录结构介绍 目录/文件 说明 build 最终发布的代码存放位置. config 配置目录,包括端口号等.我们初学可以使用默认的. node_modules npm 加载的项目依赖模块 src 这里是我们要开发的目录,基本上要做的事情都在这个目录里.里面包含了几个目录及文件: assets: 放置一些图片,如logo等. commponents: 目录里面放了一个组件文件,可以不用. App.vue: 项目入口文件,我们也可以直接将组建写这里,而不使用 commpo

教你在微信中给Vue单页应用设置标题

前言 由于Vue React Angular等框架出来的应用都是SPA(single-page-application),所以就没有所谓的页面 都是router 而网页的标题 随着路由的改变而改变 也就成了一个(伪)需求 问题 在iOS的微信中 一个SPA应用 想要改变微信顶部导航栏的标题 使用document.title = xxx来改变网页标题是无效的 原因大致就是因为在微信中webview只加载网页标题一次 动态改变是无效的 除非都以新页面打开(那SPA的用户体验有什么卵用吗) 解决方案

Vue 路由设置router

由于学习的是router1.0的设置方法,但是现在都是支持2.0的,都报错,那些方法没定义,所以只好又来研究一下router2.0. vue-router2.0对路由的设置有了很大的改变,在HTML中将之前的用a标签link path改成了直接用一个router-link标签,但是你在网页审查元素会发现它还是一个a标签,router-view没有改变,在js中也将原本的router.map 直接改成了一个数组然后在new VueRouter时直接将数组用进去,将之前的挂载由router.star

vue+cordova项目

教你用Cordova打包Vue项目 现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app.据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是阿里提供并且Vue的作者也极力推荐的,有兴趣的可以去学习使用一下.因为我本身是做angular+ionic的,所以比较青睐cordova,下面我就教大家怎么使用cordova打包Vue项目: 第一步:安装cordova 如果已经安装则直接跳过,否则执行以下命令: n