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 相关文章推荐
JavaScript 指导方针
Apr 05 Javascript
javascript比较文档位置
Apr 08 Javascript
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
JavaScript实现复选框全选功能
Apr 11 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 vs Node.js
2015/07/17 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
js直接编辑当前cookie的脚本
2008/09/14 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
深入理解node.js http模块
2018/01/24 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
js实现简单的秒表
2020/01/16 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
python实现飞机大战
2018/09/11 Python
python构建基础的爬虫教学
2018/12/23 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
Python下载的11种姿势(小结)
2020/11/18 Python
python绘制雷达图实例讲解
2021/01/03 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
我的画教学反思
2014/04/28 职场文书
关于责任的演讲稿
2014/05/20 职场文书
环保项目建议书
2014/08/26 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
Python中else的三种使用场景
2021/06/16 Python
webpack的移动端适配方案小结
2021/07/25 Javascript
Python 视频画质增强
2022/04/28 Python