Vue-cli3项目案例

新建项目的过程不多说了，参考：https://blog.csdn.net/qq_40323256/article/details/100999860

例1:极简的一个例子

运行结果：结构目录：

A.vue

<template><div><h1>这是A页面</h1><br /><router-link to="/">返回</router-link></div>
</template>

B.vue

<template><div><h1>这是B页面</h1><br /><router-link to="/">返回</router-link></div>
</template>

Home.vue

<template><div><router-link to="/a">转向A页面</router-link><router-link to="/b">转向B页面</router-link></div>
</template>

router.js

import Vue from 'vue'
import Router from 'vue-router'import Home from './views/Home.vue'
import A from './views/A.vue'
import B from './views/B.vue'Vue.use(Router)export default new Router({routes: [{path: '/',component: Home},{path: '/a',component: A },{path: '/b',component: B  }]
})

App.vue

<template><div><router-view/></div>
</template>

main.js

import Vue from 'vue'import App from './App.vue'
import router from './router'Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')

例2：对比例1

运行结果：结构目录（和例1一样）：

其他代码和例1相同，不同的是Home.vue和router.js，注意体会代码的不同之处

Home.vue

<template><div><router-link to="/a">转向A页面</router-link><router-link to="/b">转向B页面</router-link><router-view/></div>
</template>

router.js

import Vue from 'vue'
import Router from 'vue-router'import Home from './views/Home.vue'
import A from './views/A.vue'
import B from './views/B.vue'Vue.use(Router)export default new Router({routes: [{path: '/',component: Home,children: [{path: '/a',component: A},{path: '/b',component: B}]}]
})

Vue-cli3项目案例相关推荐

Vue Cli3 项目 vue.config.js 配置
Vue Cli3 项目 vue.config.js 配置配置优化一.js文件最小化处理二.分割代码三.图片资源压缩四.开启gzip压缩先看一下优化配置之前的文件大小通过vue-cli3脚 ...
vue cli3 项目中解决跨域
最近项目中用到高德api,要做一个天气的模块. 做这个天气的模块,得知道用户所在得城市于是呢,我就在vue项目中获取了当前用户得ip,根据用户的ip定位了城市具体代码: vue页面: <te ...
Vue Cli3 项目打包优化
1.项目优化实现步骤: 清除生产环境中的console.log语句生成打包报告,根据报告优化项目第三方库启用CDN 路由懒加载首页内容定制 2.执行build 2.1 清除生产环境中的cons ...
vue cli3+项目使用postcss-px2rem或者postcss-plugin-px2rem适配
1. 使用postcss-px2rem或者postcss-plugin-px2rem讲vue项目的px全部转换未rem适配. 2. 下载: npm install --save postcss-px2 ...
vue cli3项目上限qq浏览器等出现空白兼容性错误解决方案
npm install es6-promise --save-dev npm install babel-polyfill --save-dev 都在main.js中引入 import 'babel- ...
可视化构建工具探索之Vue Cli3.0 阿里飞冰
Vue Cli3.0可视化构建工具--Vue UI 一.安装环境安装了最新的Vue CLI.打开Terminal,输入: npm install -g @vue/cli or yarn global ...
vue cli3 搭建项目使用vue-router 以及 element-ui
搭建vue项目,(node和git 首先要下载) 1.首先根据vue官网 Cli的说明,快速搭建. cli3上的命令应该是: vue create 项目名称(之后可以一路回车) npm run ser ...
公司项目vue cli2升级到vue cli3
背景: 公司项目历时时间较长,通过长时间的迭代,目前项目文件较多(src目录下有2217个文件),系统庞大, 之前通过vue cli2脚手架构建的项目框架,在本地开发时已经明显感觉到吃力(项目首次启动 ...
Vue CLI3搭建的项目中，如何给文件夹起别名?
因为这段大年的时间里,好久没写博客了,是好懒散了.真的是少年易老学难成,一寸光阴不可轻啊.浪费一秒钟是一秒钟的罪过. 我们使用Vue CLI3搭建的项目中,在vue.config.js文件中,在给文件 ...
vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客简介说明本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...

Vue-cli3项目案例

Vue-cli3项目案例相关推荐

最新文章

热门文章