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 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
js清空form表单中的内容示例
May 20 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 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
德生9700DX电路分析
2021/03/02 无线电
php cookis创建实现代码
2009/03/16 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
利用python进行文件操作
2020/12/04 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
智能旅行箱:Horizn Studios
2018/04/30 全球购物
苹果台湾官网:Apple台湾
2019/01/05 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
机械电子工程毕业生自荐信
2013/11/23 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
工会换届选举方案
2014/05/21 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
高一作文之乐趣
2019/11/21 职场文书