zoukankan      html  css  js  c++  java
  • vue创建项目步骤

    # 全局安装 vue-cli
    $ npm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目
    $ vue init webpack my-project
    # 安装依赖,走你
    $ cd my-project
    $ npm install
    $ npm run dev
    在config里index.js改配置自动打开浏览器
    安装路由
    下载 npm i vue-router -S
    创建router.js文件配置 
     1 //引包
     2 import VueRouter from 'vue-router'
     3 //导入对应的路由组件
     4 import Home from './components/home.vue'
     5 //创建路由对象
     6 var router = new VueRouter({
     7   routes:[
     8     //配置路由规则
     9     {path:'/',redirect:'/home'},
    10     {path:'/home',component:Home}
    11   ]
    12 })
    13 
    14 //把路由对象暴露出去
    15 export default router

    main.js文件配置

     1 import Vue from 'vue'
     2 import App from './App'
     3 
     4 /*1.1导入路由的包*/
     5 import VueRouter from 'vue-router'
     6 /*1.2 安装路由*/
     7 Vue.use(VueRouter)
     8 
     9 /*1.3 导入自己的router。js路由模块*/
    10 import router from './router.js'
    11 
    12 
    13 /* eslint-disable no-new */
    14 new Vue({
    15   el: '#app',
    16   components: { App },
    17   template: '<App/>',
    18   /*1.4 挂载路由对象到VM实例上*/
    19   router
    20 })

     在App.vue文件中通过router-view标签引用显示内容

    //内容content
        <transition>
          <router-view></router-view>
        </transition>

    通过router-link标签to跳转

     <router-link class="mui-tab-item" to="/home">
    <router-link class="mui-tab-item" to="/home">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
    </router-link>
     
  • 相关阅读:
    UILabel的使用
    CGAffineTransform的使用
    UIView的常用方法
    UICollectionViewController的用法1
    网址连接
    android developers blog
    Java并发编程:volatile关键字解析
    Android触摸屏事件派发机制详解与源码分析
    setScale,preScale 和 postScale 的区别
    android 内存
  • 原文地址:https://www.cnblogs.com/ll15888/p/11233802.html
Copyright © 2011-2022 走看看