前端架构之路:使用Vue.js开始第一个项目
一、技术准备
二、开发工具
三、使用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 = axios new 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
前端架构之路:使用Vue.js开始第一个项目的更多相关文章
- Vue.js开始第一个项目
前端架构之路:使用Vue.js开始第一个项目 Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 使用 ...
- 新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...
- web前端开发面试题(Vue.js)
1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? ...
- 我的前端架构之二--统一扩展Js方法
我的前端架构汇总 MyJs_Core.js 这是一个核心的Js文件,它扩展了原生的Js方法.如下: Array对象: 1) indexOf 2) max 3) min 4) removeAt 5) i ...
- 前端架构之路:Windows下安装Nodejs步骤
最近打算把我们的微信端用Vue.js重构,为什么选择Vue.js,一是之前使用的是传统的asp.net mvc,多页面应用用户体验比单页面要差.二是使用过Angular.js,感觉对开发人员要求较 ...
- Vue.js——60分钟webpack项目模板快速入门
概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...
- vue.js学习第一天,了解vue.js
vue.js是一个前端框架,他与jquery不同,jquery是一个js库,而vue.js是js的前端框架. vue.js对我们前端页面入侵比较大,而jquery则不然.那我们还为什么要使用vue.j ...
- Vue.js——60分钟webpack项目模板快速入门
概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...
- Vue.js——60分钟browserify项目模板快速入门
概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...
随机推荐
- poj 2369 Permutations (置换入门)
题意:给你一堆无序的数列p,求k,使得p^k=p 思路:利用置换的性质,先找出所有的循环,然后循环中元素的个数的lcm就是答案 代码: #include <cstdio> #include ...
- Hibernate(三)之配置文件详解
一.核心配置文件(hibernate.cfg.xml) <?xml version="1.0" encoding="UTF-8"?> <!DO ...
- SVN将一台服务器上的代码迁移到另一台服务器上
由于我们出差,需要把svn服务器上的代码同步到我电脑上,自己各种百度折腾了快一天才弄好,下面来分享下我的具体思路和操作步骤.有2种方式:第一种方式:直接将本地自己dowm下来的代码导入到本地svn服务 ...
- 深入浅出数据结构C语言版(8)——后缀表达式、栈与四则运算计算器
在深入浅出数据结构(7)的末尾,我们提到了栈可以用于实现计算器,并且我们给出了存储表达式的数据结构(结构体及该结构体组成的数组),如下: //SIZE用于多个场合,如栈的大小.表达式数组的大小 #de ...
- Python多层目录模块调用
一. 引用模块在 父+级目录中: 1. 将导入模块所在目录(../model/模块)添加到系统环境变量path下,可添加多个 import syssys.path.append("../mo ...
- 简单的利用JS来判断页面是在手机端还是在PC端打开的方法
在移动设备应用越来越广泛的今天,许多网站都开始做移动端的界面展示,两者屏幕尺寸差异很大,所以展示的内容也有所差别.于是就遇到一个问题,如何判断你的页面是在移动端还是在PC端打开的,很简单的问题,那我们 ...
- view测量
一.测规格是由测量模式mode和测量大小size组成的,size好说,那测量模式mode代表什么含义呢.由上面的代码可知,测量模式有三类: UNSPECIFIED 父控件不对你有任何限制, ...
- C 语言实现字符串替换
void replaceFirst(char *str1,char *str2,char *str3) { ]; char *p; strcpy(str4,str1); if((p=strstr(st ...
- 基于 Haproxy 构建负载均衡集群
1.HAPROXY简介 HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种负载均衡解决方案.HAProxy特别适用于那些负载特大的web ...
- git的使用及常用命令(二)
一,把文件放在版本库中 执行 git add XXX文件名 在执行 git commit -m ‘提交注释' 查看状态 git status 如果没有改变文件,nothing to comment ...