前端架构之路:使用Vue开始第一个项目
一、技术准备
二、开发工具
三、使用vue-cli快速开始模板项目
cnpm install vue-cli -g
cd 目录路径 vue init webpack-simple first-vue
├─src // 开发目录 │ ├─assets // 资源文件目录,需要打包的放到该目录下 │ │ ├─logo.png │ │ ├─App.vue // App.vue组件 │ ├─main.js // 预编译入口 ├─.babelrc // babel配置文件 ├─.gitignore ├─index.html // 主页 ├─package.json // 项目配置文件 ├─README.md ├─webpack.config.js // webpack配置文件
cd first-vue npm install
npm run dev
npm run build
四、给项目添加组件
<template><div id="firstcomponent"><h1>标题</h1><a> 作者:{{ author }} </a></div> </template><script type="text/javascript">export default {data () {return {author: "ling"}}} </script><style> </style>
<import firstcomponent from './components/firstcomponent.vue'>
export default {name: 'app',data () {return {msg: 'Welcome to Your Vue.js App'}},components: { firstcomponent } }
<template><div id="app"><img src="./assets/logo.png"><h2>{{msg}}</h2><firstcomponent></firstcomponent></div> </template>
五、使用vue-router添加路由功能
cnpm install vue-router --save
<template><div ><h1>我是View1</h1><a> 我是View1 </a></div> </template><script type="text/javascript">export default {name: 'view1',} </script><style> </style>
<template><div ><h1>我是View2</h1><a> 我是View2</a></div> </template><script type="text/javascript">export default {name: 'view2',} </script><style> </style>
import Vue from 'vue' import Router from 'vue-router' import View1 from './views/view1.vue' import View2 from './views/view2.vue'Vue.use(Router)export default new Router({linkActiveClass: 'active',// 路由配置routes: [{path: '/view1',component: View1}, {path: '/view2',component: View2}, {path: '/*',component: View1}] })
import Vue from 'vue' import App from './App.vue' import router from './router.js'new Vue({el: '#app',router,render: h => h(App) })
<router-link to="/view1">Go to view1</router-link> <router-link to="/view2">Go to view2</router-link> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view>
六、使用axios请求数据
cnpm install axios --save
import Vue from 'vue' import axios from 'axios' import App from './App.vue' import router from './router.js'Vue.prototype.$ajax = axiosnew Vue({el: '#app',router,render: h => h(App) })
<script type="text/javascript"> import axios from 'axios'export default {name: 'view1',mounted: function() {axios.post('/jhb/getslides').then(function (response) {console.log(response);}).catch(function (response) {console.log(response);});} } </script>
七、更多的Vue.js
转载于:https://www.cnblogs.com/beimingbingpo/p/9299527.html
前端架构之路:使用Vue开始第一个项目相关推荐
- 前端架构之路:数据驱动型组件-HeyUI,一个新型的VUE组件库
什么是数据驱动型组件? 其实,目前来说,也只有HEYUI组件库是这种方式的尝试者,这也是我在设计组件库的过程中,慢慢思考的成果. 所以,关于这一种定义,还没有人运用过. 当然,这也是HEYUI区别于其 ...
- 前端架构之路(3) - 前端开发规范
前端开发规范 1. 为什么需要 "前端开发规范" 规范不是强制性的,对代码的编写和程序的运行不会有致命的问题,但是没有规范会有一系列的问题,比如: 缺乏规范,第一个问题就是团队编码 ...
- vue:无法将“vue”识别为脚本_「前端架构」React和Vue -CTO的选择正确框架的指南...
快速总结:为项目选择正确的javascript框架或库是CTO和项目经理的基本任务.然而,选择的范围很大程度上取决于几个因素,如项目时间.学习曲线.框架性能和团队规模.这篇文章旨在指导他们选择正确的j ...
- 「前端架构」React和Vue -CTO的选择正确框架的指南
快速总结:为项目选择正确的javascript框架或库是CTO和项目经理的基本任务.然而,选择的范围很大程度上取决于几个因素,如项目时间.学习曲线.框架性能和团队规模.这篇文章旨在指导他们选择正确的j ...
- 自定义菜单url不能带_微服务架构【SpringBoot+SpringCloud+VUE】五 || 实战项目微信公众号自定义开发...
本章主要讲解微信公众号自定义菜单.微信网页开发.模板消息推送等功能的实现: 发福利了,下方关注公众号,就能免费获取项目源码 1.自定义菜单 开发前需要了解以下几点: 1.微信公众号的自定义菜单最多包括 ...
- 前端面试知识点归纳:vue,react,webpack,bable,项目开发
- 前端架构师亲述:前端工程师成长之路的 N 问 及 回答
问题回答者:黄轶,目前就职于 Zoom 公司担任前端架构师,曾就职于滴滴和百度,毕业于北京科技大学. 1. 前端开发 "我自己是一名从事了8年web前端开发的老程序员(我的微信:webxxq ...
- iframe微前端架构
项目介绍 demo演示:notes.jindll.com/frame github:https://github.com/niuyueyang/iframeVue 项目可以分为两部分,一部分是统一的登 ...
- 微前端架构:如何由内而外取代单体架构
点击上方 "程序员小乐"关注, 星标或置顶一起成长 每天凌晨00点00分, 第一时间与你相约 每日英文 Never expect, never assume, and never ...
最新文章
- C# 操作Excel
- python 利用 for ... else 跳出双层嵌套循环
- 不同品牌的内存条可以混用吗_混用不同品牌护肤品的技巧
- QPW 企业员工表(tf_company_employee)
- 2021年峰峰春晖中学高考成绩查询,峰峰春晖中学2019年录取分数线
- ueditor跨域上传图片文件(基于jsp框架、tomcat)
- 蔡高厅老师 - 高等数学阅读笔记 - 15 广义积分和伽马函数 定积分的应用(面积和体积) -(67、68、70、71)
- Windows下安装Python_思维导图
- 【面试题14】调整数组顺序使奇数位于偶数前面
- SQL SERVER2000教程-第五章 处理数据 第二节 检索数据
- php7 aop,php之aop实践
- 迅雷离线下载 docker
- html导航栏分割线如何,网页导航栏用图片做的分割线,第一个分割线怎么取消...
- GDOI2017滚粗记
- 你有多久没有收到圣诞节的祝福了,你收到那个女孩(男孩)的祝福了吗?
- SN/CF 5W-40含义
- 武当大字门九龙狮子功
- SGI STL的rb_tree浅析
- 餐厅设置套餐 html,餐厅如何设计爆款套餐?掌握这5个原则就够了
- 2016NOIP信息学竞赛普及组(北京)一等奖名单
热门文章
- 集成测试:固定装置多于自动装置
- jQuery 3.5.0 发布
- GaussDB(openGauss)宣布开源,性能超越 MySQL 与 PostgreSQL
- 微软 exFAT 技术将进入 Linux 内核
- java fuoco 价格_JAVA Fuoco铝合金公路车
- 2021-08-20 解决layUi 选项卡切换表格大小不匹配问题
- 解决ionic在手机上拍照图片旋转的问题
- julia go python_过去的Python的四个挑战者:Swift、Go、Julia、R
- 简述什么是图灵机_什么是图灵机
- python socket模块 和pyqt_使用PyQt和Socket进行聊天编程[标准库]