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 相关文章推荐
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
js倒计时显示实例
Dec 11 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
Vue实现滑动拼图验证码功能
Sep 15 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 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垃圾代码优化操作代码
2010/08/05 PHP
PHP学习之正则表达式
2011/04/17 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
vue中倒计时组件的实例代码
2018/07/06 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
Python random模块用法解析及简单示例
2017/12/18 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
python for 循环获取index索引的方法
2019/02/01 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
python操作kafka实践的示例代码
2019/06/19 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
爱普生美国官网:Epson美国
2018/11/05 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
怎样写好创业计划书的内容
2014/02/06 职场文书
出生公证书
2015/01/23 职场文书
《确定位置》教学反思
2016/02/18 职场文书
利用python做数据拟合详情
2021/11/17 Python