---恢复内容开始---

在搭建路由项目的时候的基本步骤

一:创建项目

  安装好vue 搭好环境 (步骤在上篇博客中)

  进入项目目录      cd   目录路径/ 目录名

  创建项目          vue init webpack  项目名

  效果:

  项目文件结构:及作用

  

-- build                            // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
  |--assets //里面放属于该项目的资源文件。存放其他组件的资源文件会被webpack编译,导致报错
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件
|-- static // 绝对路径静态文件 任何放在在static/的文件都使用绝对的URL /static/[filename]来引用
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息

二: 启动项目

  1 进入项目目录: cd 项目名

  2 启动项目:   npm run dev

  效果:

  3 然后初始化组件

三: 安装配置路由

  1 安装 :  npm install vue-router

   2 配置路由:

    如图创建如有目录

   3 在index.js路由文件中编写初始化路由对象的代码

import Vue from "vue"
import Router from "vue-router" // 这里导入可以让让用户访问的组件 Vue.use(Router); export default new Router({
// 设置路由模式为‘history’,去掉默认的#
mode: "history",
routes:[
// 路由列表 ]
})

index.js

    4  注册路由信息

    打开main.js文件,把router对象注册到vue中,代码如下

// 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'
import router from './routers/index'; Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});

main.js

   5 在视图中显示路由对应的内容

    在App.vue组件中,添加显示路由对应的内容

<template>
<div id="app">
<router-view/>
</div>
</template> <script>
export default {
name: 'App',
components: { }
}
</script> <style> </style>

App.vue

四: 引入ElementUl 框架

对于前端页面布局,我们可以使用一些开源的UI框架来配合开发,Vue开发前端项目中,比较常用的就是ElementUI了。
ElementUI是饿了么团队开发的一个UI组件框架,这个框架提前帮我们提供了很多已经写好的通用模块,我们可以在Vue项目中引入来使用,这个框架的使用类似于我们前面学习的bootstrap框架,也就是说,我们完全可以把官方文档中的组件代码拿来就用,有定制性的内容,可以直接通过样式进行覆盖修改就可以了。

ElementUI框架的描述

    中文官网:http://element-cn.eleme.io/#/zh-CN

    文档快速入门:http://element-cn.eleme.io/#/zh-CN/component/quickstart

  1 快速安装ElementUI

    安装指令:npm i element-ui -S  或  npm install element-ui --save

  2 在main.js中导入ElementUI,

   

// 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'
import router from './routers/index';
//element-ui的导入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
vue.use(ElementUI);
Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
Route,
components: { App },
template: '<App/>'
});

main.js

五: 开发页面

 (一): 首页

  1 创建首页组件

<template>

</template>

<script>
export default {
name: "Home",
data(){
return { };
}
}
</script> <style scoped> </style>

首页组件

 

  2  创建首页对应的路由

   在routes/index.js中引入home组件,并设置Home组件作为路由  

import Vue from "vue"
import Router from "vue-router" // 这里导入可以让让用户访问的组件
import Home from "@/components/Home"; Vue.use(Router); export default new Router({
// 设置路由模式为‘history’,去掉默认的#
mode: "history",
routes:[
// 路由列表
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/home",
name: "Home",
component:Home,
}
]
})

index.js

   效果

  

  3 开发子导航组件

  在其他页面都存在相同的导航,为避免重复代码,需创建一个单独的组件

  

  4  在首页Home.vue导入导航插件,代码如下: 

<template>
<div class="home">
<Header/>
</div>
</template> <script>
import Header from "./common/Header"
export default {
name: "Home",
data(){
return { };
},
components:{
Header,
}
}
</script> <style scoped> </style>

home.vue

---恢复内容结束---

四: 使用vue搭建网站前端页面的更多相关文章

  1. 6 ~ express ~ 搭建用户注册前端页面

    一,前端页面 /views/login.html <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. ASP.NET网站前端页面的复制

    网络普及的时代,遇到问题的首要解决方案并不是问人,而是找度娘.当我们找一些技术性的问题时,会发现很多解决方案在博客里,看看博主发表的博客总是惊叹不已,想要自己也有这么一个好习惯,把学到的东西以自己的方 ...

  3. vue搭建后台管理页面(点击左侧导航,切换右侧内容)

    home.vue页面 <template> <div style="background-color: #EBEBEB;min-height:900px"> ...

  4. github上搭建网站前台页面

    其实就是把html页面提交到github,为了能在线演示: 1. 首先在github网站找到你的项目 2. 点击设置 3. 找到这几个选项,选择master branch打钩,然后保存 4. 然后就会 ...

  5. 如何在github上搭建网站?

    3年前就想写这篇文章了,一直没写,拖到现在,迟到总比不到好,哈哈.github pages只支持静态博客(html,css,js),不支持服务端(php,physon). 一.尝试一下 1.在电脑上安 ...

  6. vue- 项目之前端页面搭建1

    项目分析 首页 导航.登录注册栏.轮播图.地板导航登录注册 选项卡免费课 课程分类.筛选.课程列表免费课详情 课程封面视频.优惠活动倒计时.选项卡我的购物车 全选.商品价格统计购买结算 购买成功 我的 ...

  7. 基于laravel5.4 vue 和vue-element搭建的单页面后台CMS

    介绍 该项目后台是基于vue和laravel搭建的单页面CMS系统,包含了文章管理,权限管理,用户管理等基本模块. 前台使用了传统web技术,laravel渲染搭建了个博客系统 github地址:ht ...

  8. 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  9. vue搭建前端相关命令

    Vue搭建.新建工程并打开浏览器调试的指令: 这四行命令就是我们接下来工作了. 1.npm install –global vue-cli 我们在安装好nodejs后就可以用到“npm”这个前缀指令, ...

随机推荐

  1. jsky使用小记

    jsky是一款深度WEB应用安全评估工具,能轻松应对各种复杂的WEB应用,全面深入发现里面存在的安全弱点. jsky可以检测出包括SQL注入.跨站脚本.目录泄露.网页木马等在内的所有的WEB应用层漏洞 ...

  2. SpringMVC之JSON交互

    #什么是json? json是一种用于储存数据格式,是js脚本语言的子集. #json的作用? 它可以传递对象.数组等数据结构.如果是单个数据,则要用数组,不用对象,因为对象都是键值对的 方式去存储, ...

  3. spring中的springSecurity安全框架的环境搭建

    首先在web.xml文件中配置监听器和过滤器 <!--监听器 加载安全框架的核心配置文件到spring容器中--> <context-param> <param-name ...

  4. mysql 导入大文件

     set global max_allowed_packet=1000000000; set global net_buffer_length=1000000; 

  5. 利用cookies跳过登陆验证码

    前言在爬取某些网页时,登陆界面时经常遇到的一个坎,而现在大多数的网站在登陆时都会要求用户填写验证码.当然,我们可以设计一套机器学习的算法去破解验证码,然而,验证码的形式多种多样,稍微变一下(有些甚至是 ...

  6. sqlalchemy多对多查询

    # coding:utf-8 from sqlalchemy import create_engine, Column, String, Integer, ForeignKey, Table from ...

  7. Linux的常用路由配置

    1.配置默认路由 ip route add default via 192.168.10.1 dev eth0 route add default gw 192.168.10.1 2.间接路由: ip ...

  8. php操作共享内存shmop类及简单使用测试(代码)

    SimpleSHM 是一个较小的抽象层,用于使用 PHP 操作共享内存,支持以一种面向对象的方式轻松操作内存段.在编写使用共享内存进行存储的小型应用程序时,这个库可帮助创建非常简洁的代码.可以使用 3 ...

  9. gdb调试程序函数名为问号,什么原因?step by step解决方案

    gdb调试程序函数名为问号,什么原因? http://bbs.chinaunix.net/thread-1823649-1-1.html http://www.bubuko.com/infodetai ...

  10. 写给大忙人的Elasticsearch架构与概念(未完待续)

    最新版本官方文档https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html文档增删改参考https://www ...