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 EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 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 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
python抽象基类用法实例分析
2015/06/04 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
阿德的梦教学反思
2014/02/06 职场文书
《悯农》教学反思
2014/04/28 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
医院病假条怎么写
2015/08/17 职场文书
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
Python简易开发之制作计算器
2022/04/28 Python
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server