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 相关文章推荐
二级域名转向类
Nov 09 Javascript
ext checkboxgroup 回填数据解决
Aug 21 Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
HTML上传控件取消选择
Mar 06 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 Javascript
JS+CSS实现炫酷光感效果
Sep 05 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
解析php防止form重复提交的方法
2013/07/01 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
PHP可变函数学习小结
2015/11/29 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
详解javascript高级定时器
2015/12/31 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
Vuex提升学习篇
2018/01/11 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
金融专业推荐信
2013/11/14 职场文书
大学毕业感言50字
2014/02/07 职场文书
机修工工作职责
2014/02/21 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
火锅店的活动方案
2014/08/15 职场文书
新郎答谢词
2015/01/04 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python