vue.js单页面应用实例的简单实现


Posted in Javascript onApril 10, 2017

一:npm的安装

由于新版的node.js已经集成了npm的环境,所以只需去官网下载node.js并安装,安装完成后使用cmd检测是否成功。

测试node的版本号:node -v

测试npm的版本号:npm -v

vue.js单页面应用实例的简单实现 

 以上提示代表安装成功

二:vue.js环境搭建

1、首先安装淘宝的npm镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org

2、安装vue.js环境::cnpm install -g vue-cli

3、测试vue的安装:vue

三:vue.js项目的建立

新建一个名为pt的vue项目:在F盘创建一个名为pt的文件夹:执行:cd f:\ vue init webpack pt

接下来会依次出现以下的操作

vue.js单页面应用实例的简单实现

注:Use ESlint to lint your code-是否使用ESlint(最后选否,否则不熟悉这种严格的方式,会被坑惨,没空格会报错,多空格也会报错)

vue项目的启动步骤:(1)cd pt (2)npm install (3)npm run dev

最终的目录结构:

vue.js单页面应用实例的简单实现

四:创建一个vue实例

main.js:应用入口文件

App.js:初始化组件

例:我们要实现如下效果的一个网站

vue.js单页面应用实例的简单实现

有四个模块:首页、公司介绍、招贤纳士、易点咨询。

项目的思维导向图:

vue.js单页面应用实例的简单实现

1、配置入口文件main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// 引入router路由
import Router from 'vue-router'
// 引入项目的四个模块组件
import introduce from './components/introduce'
import home from './components/home'
import employment from './components/employment'
import consult from './components/consult'
// 使用router
Vue.use(Router)
// 定义路由
var routes = [{
 path: '/home',
 component: home
}, {
 path: '/introduce',
 component: introduce
}, {
 path: '/employment',
 component: employment
}, {
 path: '/consult',
 component: consult 
}]
// 实例化路由
var vueRouter = new Router({
 routes
})
// 创建和挂载根实例
new Vue({
 el: '#app',
 router: vueRouter,
 template: '<App></App>',
 components: { App }
})

2、初始化组件App.vue开发

<template>
 <div id="app">
  <div class="nav-top">
    <!-- 引入公用的头部 header组件 -->
     <v-header></v-header>
  </div>
  <div class="banner">
  </div>
  <div class="contianer">
   <!-- 路由中的几个组件在这里被渲染,默认被渲染的为第一个组件,也就是home组件 -->
   <router-view></router-view>
  </div>
 </div>
</template>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
}
.nav-top {
 position: absolute;
 top: 0;
 left: 50%;
 margin-left: -600px;
 z-index: 99;
}
.banner{
 width: 100%;
 height: 370px;
 overflow: hidden;
 background: url("components/banner.jpg");
 background-repeat: no-repeat;
}
</style>
<script>
//引入header组件
import header from './components/header.vue'
//输出header组件
export default{
 components: {
  'v-header': header
 }
}
</script>

3、创建公用头部组件

<template>
 <div class="header">
  <div class="header-wrapper">
   <div class="logo">
    <a href="/home" rel="external nofollow" ><img src="../assets/ysh.png" alt width="210"></a>
   </div>
   <ul class="nav">
    <li><router-link to="/home">首页</router-link></li>
    <li><router-link to="/introduce">公司介绍</router-link></li>
    <li><router-link to="/employment">招贤纳士</router-link></li>
    <li><router-link to="/consult">易点咨询</router-link></li>
   </ul> 
  </div> 
 </div>
</template>
<style>
.header{
 width:1200px;
 height:100px;
 margin:0 auto;
 color:#fff;
}
.header-wrapper{
 width:1200px;
 height:100px;
}
.logo{
 width:210px;
 height:100px;
 float:left;
}
.nav{
 width:700px;
 height:100px;
 font-size:15px;
 float:right;
}
.nav li{
 float:left;
 margin-right:30px;
 height:34px;
 line-height:34px;
 overflow:hidden;
 margin-top:34px;
}
.nav li:last-child{
 margin-right:0;
}
.nav a{
 display:inline-block;
 padding:0 13px;
 color:#fff;
 border-radius:15px;
}
.nav a.router-link-active{
 background:#c10514;
}
</style>

4、创建其他组件

需注意模板文件都只能有一个根元素。

<template>
<div class="intro">
公司介绍
</div>
<div>
zx
</div>
</template>
<style>
.intro{
  font-size:20px;
  color:#000;
  margin:20px auto;
}
</style>

像这种情况会报错。

正确的为:

<template>
  <div class="intro">
    公司介绍
  </div>
</template>
<style>
.intro{
  font-size:20px;
  color:#000;
  margin:20px auto;
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery制作的产品广告效果
Dec 08 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
JSONP原理及简单实现
Jun 08 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
vue使用vue-cli快速创建工程
Jul 28 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 Javascript
javascript内存分配原理实例分析
Apr 10 #Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 #Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 #Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 #Javascript
Vue2递归组件实现树形菜单
Apr 10 #Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 #Javascript
javascript防篡改对象实例详解
Apr 10 #Javascript
You might like
什么是短波收听SWL
2021/03/01 无线电
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
jquery 分页控件实现代码
2009/11/30 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
Python 字典dict使用介绍
2014/11/30 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
Python常用断言函数实例汇总
2020/11/30 Python
Django中ORM的基本使用教程
2020/12/22 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
酒店管理专业学生求职信
2013/09/27 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
反四风对照检查材料
2014/09/22 职场文书
地道战观后感500字
2015/06/04 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js