新手vue构建单页面应用实例
本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见!
步骤:
1.使用vue-cli创建项目
2.使用vue-router实现单页路由
3.用vuex管理我们的数据流
4.使用vue-resource请求我们的node服务端
5.使用.vue文件进行组件化的开发
一、目录结构:
二、搭建项目
需先安装淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org
Mac安装 vue-cli: sudo npm install -g vue-cli
Windows 安装 vue-cli:npm install -g vue-cli
构建初始化项目:vue init webpack project(创建webpack项目并下载依赖)
输入命令进入项目: cd project
安装依赖: npm install
npm i
开始运行: npm run dev (或输入http://localhost:8080),在热加载中运行我们的应用
它会去找到package.json
的scripts
对象,执行node bulid/dev-server.js
在这文件里,配置了Webpack,会让它去编译项目文件,并且运行服务器。
这些都准备好后,我们需要为我们的路由、XHR请求、数据管理下载三个库,我们可以从vue的官网中找到他们。另外我们使用bootstrap
作为我的UI库:
npm i vue-resource vue-router vuex bootstrap --save
三、项目开始
初始化项目(main.js)
查看我们的应用文件,我们可以在src目录下找到App.vue和main.js文件中,我们引入Vue和App,且创建了一个vue的实例(因为在router这行引入了App组件router.start(App,'#app'))
import Vue from 'vue' import App from './App' import router from './router'import VueResource from 'vue-resource' Vue.use(VueResource) Vue.config.productionTip = falsenew Vue({el: '#app',router,template: '<App/>',components: { App } })
index.html
<body><div id="app"></div></body>
App.vue
<template><div id="app"><div class="row"><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Router Basic - 01</h2></div></div></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><ul class="list-group"><!--使用指令v-link进行导航--><a class="list-group-item"><router-link to="/home">Home</router-link></a><a class="list-group-item"><router-link to="/about">About</router-link></a><a class="list-group-item"><router-link to="/contact">Contact</router-link></a></ul></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><!--用于渲染匹配的组件--><router-view></router-view></div></div></div></div></div></div> </template><script> export default {name: 'app' } </script>
// src/components/Home.vue 作为我们的首页
<template id="contact"><div><h1>Home</h1><p>This is the tutorial about Contact.</p></div> </template><script> export default {'/hello': 'Hello' } </script>
// src/components/About.vue
<template id="about"><div><h1>About</h1><p>This is the tutorial about vue-router.</p></div> </template> <script> export default {'/about': 'About' } </script>
// src/components/Contact.vue
<template id="contact"><div><h1>Contact</h1><p>This is the tutorial about Contact.</p></div> </template>export default {'/contact': 'contact' } </script>
// src/index.js
import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' import Home from '@/components/Home' import About from '@/components/About' import Contact from '@/components/Contact' import 'bootstrap/dist/css/bootstrap.css'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Hello',component: Hello},{path: '/home',name: 'Home',component: Home},{path: '/about',name: 'About',component: About},{path: '/contact',name: '/Contact',component: Contact}] })
查看项目
详细操作:
- 克隆项目:git clone https://github.com/cinderellastory415/vue-demo/tree/master/spa
- 安装依赖:npm install
- 运行项目:npm run dev 或者 npm start
输入以上命令,即可查看效果!
转载于:https://www.cnblogs.com/CinderellaStory/p/6875516.html
新手vue构建单页面应用实例相关推荐
- vue.js单页面应用实例
一:npm的安装 由于新版的node.js已经集成了npm的环境,所以只需去官网下载node.js并安装,安装完成后使用cmd检测是否成功. 测试node的版本号:node -v 测试npm的版本号: ...
- vue重构html css,使用vue重构资讯页面的实例代码解析
从我接手到将这个页面代码重构前,一直都还是使用angular1的代码去做的,需求来了也是用angular去实现:作为一个憧憬新技术的前端,怎么忍受得了现在还在使用这么有历史感的框架,所以,以前就一直在 ...
- Java快速开发平台,JEECG 3.7.5 Vue SPA单页面应用版本发布
JEECG 3.7.5 Vue SPA单页面应用版本发布 导读 ⊙ Vue+ElementUI SPA单页面应用 ⊙Datagrid标签快速切换BootstrapTable列表风 ...
- [vue] SPA单页面的实现方式有哪些?
[vue] SPA单页面的实现方式有哪些? 1.监听地址栏中hash变化驱动界面变化2.用pushsate记录浏览器的历史,驱动界面发送变化3.直接在界面用普通事件驱动界面变化它们都是遵循同一种原则: ...
- py WebsocketServer创建的服务器与vue构建前端页面相互收发信息——猪猪侠方丈-px
py WebsocketServer创建的服务器与vue构建前端页面相互收发信息 环境:py3 pycharm WebsocketServer0.5.1 vue2 废话少说上代码pycharm中.py ...
- 前端复盘: knockout + require + director 构建单页面程序
关注并将「趣谈前端」设为星标 每早08:30按时推送技术干货/优秀开源/技术思维 目前react,vue,angular等框架都支持单页面程序,最近在回顾一些知识,想起刚毕业的时候接触到knockou ...
- 使用Vue构建前端页面
起步 使用vue-cli构建初始应用,这里使用了webpack这个模板,这会产生一个比较完整的项目结构 具体文件目录的作用可以参考博客 vue-cli项目结构详解 vue init webpack p ...
- [项目实战] 使用Idea构建单页面Vue3项目(不使用node、npm)
前言 某天张三对小花说,我需要在一台新电脑上实现一个前端的漂亮页面:比如京东手机首页(m.jd.com). 小花这时吭哧吭哧的去新电脑上安装nodejs.npm,然后在本地使用npm构建vue3项目, ...
- vue多单页面多tab_vue-cli3创建多页面项目
开发了很多个单页面的项目,也开发了很多原生的项目,就是一直没机会开发多页面和单页面混合的项目,于是自己去查了一些资料,用的是vue-cli3脚手架搭建了一个多页面和单页面混合的小demo. 首先,vu ...
最新文章
- 综合操作篇 NAT 和trunk和dhcp综合应用
- ABC181——F - Silver Woods
- Java创新型模式_java设计模式--创建型模式(一)
- c语言打印数组元素_C程序打印元素差为0或1的子集数
- qemu-kvm磁盘读写的缓冲(cache)的五种模式
- 途观l怎么使用_值得考虑的SUV车型,昂科威、探岳、途观L,你会如何选?
- IE10 URL中多出一串字符,图片无法显示
- SQL结构化数据查询语言培训讲义
- 最好用的进销存软件测评排名
- windows中的pagefiles.sys文件是什么?pagefiles.sys文件的调整与删除
- 整理软件测试分析资料
- linux sd卡 分区变大,Linux下使用fdisk命令将高容量SD卡(SDHC)格成两个分区
- 深入浅出React和Redux-程墨
- word彩色图片转黑白
- CentOS7编译安装keepalived实现自动漂移、高可用及开机启动
- Sensor Fusion
- python自动聊天机器人手机版_Python实现聊天机器人
- 百思不得姐之新帖(四)
- 复杂toB业务的场景方法论
- 自拍表情成三星Galaxy S9卖点 否认模仿iPhone X