html5项目改造Vue工程化

将html5项目改造成vue项目

也就是view层的vue文件:Index.vue

<template>i<div>将html代码粘贴到这里</div>
</template>

<script>
export default {name: 'Index',//注意这里就是Index.vue文件的名称data() {return {}},methods: {gotoTest(id) {// this.$router.push() 表示路由调转this.$router.push(`/test/${id}`)}},mounted() {},components: {}
}
</script>

<style lang="scss" scoped>@import "../assets/css/amazeui.css";@import "../assets/css/admin.css";@import "../assets/css/demo.css";@import "../assets/css/seastyle.css";
</style>

router层：
index.js
1.导入对应的包

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index'
import Test from '../views/Test'
import Search from '../views/Search'
import Introduction from '../views/Introduction'

2.使用路由

Vue.use(VueRouter)

3.页面的跳转与参数的传递

const router = new VueRouter({mode: 'history',routes: [{path: '/',component: Index},{path: '/test/:abc',  // /test/45   /test/abcprops: true,component: Test},{path: '/search',component: Search},{path: '/intr',component: Introduction}]
})

4.导出路由

export default router

实例：

<template><h1>Helle world, {{abc}}</h1>
</template><script>
export default {props: {//abc对应上面的 path: '/test/:abc'，其实就是传递参数而已abc: Number  // String  地位上和data中的属性是一样的，在任何地方都可以使用 this.abc},data() {return {name: ''}},name: "Test"
}
</script><style scoped></style>

html5项目改造Vue工程化相关推荐

【vue项目实战】Vue工程化项目--猫眼电影移动端（二）
vue工程化第二节添加内容和样式使用axios请求数据,参考这里添加局部左右滑动(即将上映页),参考 (左右滑动也可使用插件) 组件化开发,相同代码可以提取出来作为一个组件来调用,减少代码量,提 ...
vue项目改造nuxt（SEO优化）
欢迎大家进群,一起探讨学习微信公众号,每天给大家提供技术干货博主技术笔记博主网站地址1 博主网站地址2 博主开源微服架构前后端分离技术博客项目源码地址,欢迎各位star 1. 背景今年开源了一 ...
Vue工程化项目创建-VueCli与Vite
在完成了node.js的安装之后,我们就可以正式来创建我们的Vue工程化项目了,我目前学习到两个创建工程化项目的工具是Vue-Cli还有Vite,其中VueCli可用于创建vue2与vue3的项目,而 ...
使用vue-cli创建Vue工程化项目及单文件组件的创建和调用
文章目录 1. Vue 单文件组件的优势 2. cli 创建 Vue 工程项目 3. 单文件组件的创建和调用 1. Vue 单文件组件的优势把一个组件全部内容汇合到一个文件中,文件名字是以 .vue ...
【vue项目实战】Vue工程化项目--猫眼电影移动端
这里是仿猫眼移动端.使用 vue-cli 创建项目. 本节先介绍并进行项目的初始化,然后把主框架搭起来,熟悉路由和组件,后面在项目demo 持续贴出完整项目代码.也会更新博客. 第二节传送 ...
视频教程-最新完整VUE前端教程从入门到精通，纯干货企业级项目实战-Vue
最新完整VUE前端教程从入门到精通,纯干货企业级项目实战 10年以上开发经验,曾经是八维教育实训主任,千峰教育高级HTML5前端讲师,尚品中国创始人.现任程序思维创始人.曾和大厂.国企等大型企业合作开 ...
vue2-ssr从vue-cli搭建项目改造服务端渲染+打包上线部署
为了完成vue+ssr,本人呕心沥血翻阅很多博主的文档,并在b站看了很多视频之后,经过个人实践,终于整理出一套完整版,无缺失,不报错的改造流程(亲测!!) 从创建=>打包=>上线部署,详细 ...
将springboot项目和vue项目部署到windows 2016 server（服务器）
将springboot项目和vue项目部署到服务器 1.服务器环境配置 1.1 服务器需要安装的环境 1.2 服务器需要配置的入站与进站规则 2.springboot项目的打包 2.1 springb ...
使用Visual Studio 2010开发和调试Html5项目
上周有幸参加微软技术大会(TechED2010),身临其境领略微软这样的国际化公司大家风范,云加端的概念将技术思维提到的一个新的档次,此行收获很大,在第一天谢恩伟提到正在进行的IE9开发大赛让我很是关 ...
Vue 脚手架生成的项目结构分析||Vue 脚手架的自定义配置
Vue 脚手架生成的项目结构分析 Vue 脚手架的自定义配置

html5项目改造Vue工程化

html5项目改造Vue工程化相关推荐

最新文章

热门文章