vue2.0开发实践总结之入门篇

vue2.0 据说也出了很久了,博主终于操了一次实刀。

整体项目采用  vue +  vue-router +  vuex (传说中的vue 全家桶),构建工具使用尤大大推出的vue-cli

项目是图片分享社交平台。

项目预览:

1 .vue-cli构建工具必知

我选用的vue-cli 是基于webpack的版本 ,不了解webpack的可以先粗略看下下面的基本知识

webpack 基本知识点:

entry:入口点,webpack会从入口点设置的js文件开始对项目进行构建,过程中,所有入口点通过import或者require依赖的包,都会被打包到output中制定的文件和路径;

output:中设置打包好的文件的输出路径还有文件名;

module:主要是loaders,loaders是webpack进行打包的解析器,css、vue、babel、scss都需要用npm安装相应的loader,webpack才能对该格式的文件进行解析和处理;

plugins:是一些webpack的打包插件,跟解析的语言无关,用来辅助构建,提供丰富的附加功能。

vue-cli 安装

1). 首先,安装 vue-cli。(确保你有 node 和 npm)

npm i -g vue-cli

2).创建一个 webpack 项目并且下载依赖

vue init webpack demo
cd demo
npm i

3). 运行

npm run dev
 //npm run xxx 是执行配置在package.json中的脚本
e.g: 它会去找到package.json的scripts对象,执行node bulid/dev-server.js

4). 构建

npm run dev   //运行结束后,在当前目录下会在生成 dist 目录,将dist目录放在服务器上,使用服务器上访问index.html的url即可

若打包之后,项目的静态文件出现引用路径问题,可于项目目录 config/index.js 修改以下数据

module.exports = {
build:{
 assetsSubDirectory: 'static', //修改这里成你项目放置静态文件的目录
 assetsPublicPath: './', //修改这里成你项目放置静态文件的目录
 }
}

在静态文件 index.html 文件下, 引用静态文件

<link rel="stylesheet" href="static/css/icon/iconfont.css"/>

vue支持scss 配置

1).安装以下模块

npm install node-sass --save-dev
npm install sass-loader --save-dev 

//--save-dev 会将该依赖写入package.json,方便别人安装依赖

2).打开webpack.base.config.js在loaders里面加上

 {
 test: /\.scss$/,
 loaders: ["style", "css", "sass"]
 }

3).在需要用到scss的地方写上

<style lang="scss"> </style>

2. 项目整体架构

项目整体目录如下

package.json

--build
--config
--dist //npm run build 之后再生成的目录
--src
 --components // 用于存放组件
 --page //页面组件,由vue-router引入
 --router //路由
 --store // 数据流管理
 main.js //入口文件
 app.vue //主组件
--static //静态文件目录
.babelrc
.gitignore //git忽略上传文件
index.html //静态文件入口

main.js

入口文件,主要作用是初始化vue实例并使用需要的插件

import Vue from 'vue'
import router from './router/router'
import store from './store/store'

Vue.config.debug = true //开启debug模式
window.log = console.log
let data = {
 router,
 store
}
new Vue(data).$mount('#app') 

 //创建一个app实例,并且挂载到选择符#app匹配的元素上 在根目录html里面

挂载到#app ,此处看一下尤大大给的生命周期图,以下的意思是,假如new vue 的时候,有显示的 el 属性

 let data = {
 el:'#app',
 router,
 store
}

则无须手动挂载到选择符#app匹配的元素上

 app.vue

app.vue是我们的主组件,所有页面都是在App.vue下进行切换的,由于app.vue在所有页面都有,我们将会在app.vue上面写一些初始化全局方法。

考虑到 组件 header,footer,loading动画基本整个项目都会使用到,app.vue代码如下

<template>
 <div class="com-app">
 <com-header></com-header>
 <transition :name="transitionName">
 <router-view class="child-view"></router-view>
 </transition>
 <com-footer v-show="isFooter"></com-footer>
 <com-loading v-show="loading"></com-loading>
 </div>
</template>

由于footer,loading在整个项目中会频繁地改变,故v-show

v-if   如果条件为false,它什么也不做,加载速度较快。当条件为真时,v-if 才会真正编译渲染页面结构
v-show 渲染页面结构后,通过 "display:none" 控制元素状态

router    根据不同路由跳转目录,按需加载相应的组件

const routes = [
 {
 path: '/',
 component: App,
 children: [
 {path: '/index/:type', name: 'index', component: Index},
 {path: '/home', name: 'home', component: Home},
 {path: '/HomeUserInfo/:uid', name: 'homeUserInfo', component: HomeUserInfo},
 {path: '/article/:id', name: 'article', component: Article},
 {path: '/addmsg', name: 'addMsg', component: AddMsg},
 {path: '/search/:types', name: 'searchresult', component: SearchResult},
 {path: '/login', name: 'login', component: Login},
 {path: '/register', name: 'register', component: Register},
 {path: '/modif', name: 'Modifi', component: Modifi},
 {path: '/admin', name: 'Admin', component: Admin}
 ]
 }
]
const router = new VueRouter({
 routes: routes, // short for routes: routes
 linkActiveClass: 'active', // router-link的选中状态的class,也有一个默认的值
 history: true
})

后续更新 项目中遇到的难点,以及vuex使用~

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 基于Vue.js的表格分页组件

    一.Vue.js简介 1.Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 (1) 简洁 下面看一段Angular的实现双向绑定的代码 // html <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-

  • Vue.js常用指令汇总(v-if、v-for等)

    有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素: eg: HTML: <div id="example01"> <p v-if="male">Male</p> <p v-if=&qu

  • Vue2.0组件间数据传递示例

    Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有的后代 Vue2.0后$dispatch(),$broadcast()被弃用,见https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换 1,父组件向子组件传递场景:Father上一个输入框,根据输入传递到Child组件

  • vue.js+Element实现表格里的增删改查

    新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element (http://element.eleme.io/#/zh-CN)来配合vue.js进行样式填充 之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js 下面就介绍一下vue.js应用在表格里的增删改查 首先引入一下element的js <script src="plugins/element-ui/index.js"></script> 然后引入需要用到的vue

  • vue2.0开发实践总结之疑难篇

    续上一篇文章:vue2.0 开发实践总结之入门篇 ,如果没有看过的可以移步看一下. 本篇文章目录如下: 1.  vue 组件的说明和使用 2.  vuex在实际开发中的使用 3.  开发实践总结 1.  vue 组件的说明和使用 一个组件实质上是一个拥有预定义选项的一个 Vue 实例 在header组件内部允许外部使用,需要导出属性,有2种导出方法 1.  默认导出(不用命名) export default { data () { return { msg: 'header' } } } 以上代

  • vue2.0结合DataTable插件实现表格动态刷新的方法详解

    本文实例讲述了vue2.0结合DataTable插件实现表格动态刷新的方法.分享给大家供大家参考,具体如下: 产品提出的需求是这样的,很普通的一个统计server端task完成率和状态的表格,要自动刷新其中的数据,并且当单个task完成的时候report给server端,看起来好easy好easy的一个需求啊!且听我说完哈! 我这边使用的是框架是vue,表格自然用v-for渲染,然后我们这边分页搜索神马的都是前端弄,也就是说后端只管把一大坨数据塞到前端,然后前端自己组装分页器和完成模糊搜索,所以

  • vue.js表格组件开发的实例详解

    前言 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件开发的基础 组件可以扩展 HTML 元素,封装可重用的代码.我理解为功能模块的模板吧. 对于vue来说,组件是这个样子的,我们在html里面写 <div id="example"> <my-compone

  • vue.js 表格分页ajax 异步加载数据

    Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: f

  • 基于vue的下拉刷新指令和滚动刷新指令

    小编最近在实现移动端列表页面显示的时候一直在思考如何实现列表的自动更新数据,对于大多数Native App或者Web App,在列表的底部增加"加载更多"的按钮也是解决这样的问题一种交互的方式,当然,这样的交互其实还好,不过根据用户的操作习惯来看,似乎滚动刷新更多数据和下拉刷新当前数据的操作方式,更符合用户对列表分页数据的读取习惯,因此,在这里小编想简单的说说,这次在小编系统中所使用的下拉刷新和滚动刷新的实现方式! 其实,这种实现数据加载的原理很简单 在滚动刷新的时候,需要在列表滚动到

  • Vue.js开发环境搭建

    一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angul

  • 概述VUE2.0不可忽视的很多变化

    今天使用webpack-sample初始一个vue-cli项目,在app.vue文件中添加了个钩子函数ready,可是ready内的事件一直不执行,检查了webpack文件和package.json也没发现什么问题,浏览器也没报错或者提示,很令人捉急.然后去github看了webpack-simple源码,才发现原来vue init webpack-simple默认安装的vue是2.0版本.马上推测到是不是因为vue2.0废弃了ready的用法,果然不出所料,我真是太机智了.看了下vue2.0的

随机推荐