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"><![CDATA[ ]]></style>

2. 项目整体架构 

项目整体目录如下

--build

--config

--dist   //npm run build 之后再生成的目录

--src

--components   // 用于存放组件

--page    //页面组件,由vue-router引入

--router  //路由

--store   // 数据流管理

main.js   //入口文件

app.vue   //主组件

--static   //静态文件目录

.babelrc

.gitignore  //git忽略上传文件

index.html  //静态文件入口

package.json

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

})

vue 2.0的更多相关文章

  1. 使用 Vue 2.0 实现服务端渲染的 HackerNews

    Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.v ...

  2. 新手入门指导:Vue 2.0 的建议学习顺序

    起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...

  3. vue 2.0 无法编译ES6语法

    # vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...

  4. Vue 2.0初学后个人总结及分享

    摘要:最近在上海找工作,发现Vue前景还不错,于是就打算先学习一下(之前了解过,但是一直没提到日程上)这篇随笔当是为了自己学习之后,做一个小的阶段性总结.希望本文的内容对于刚开始接触vue的朋友们有点 ...

  5. 《vue.js2.0从入门到放弃》学习之路

    原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...

  6. Vue 2.0基础语法:系统指令

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Vue初体验 新建一个空的项目,引入vue.js文件.写如下代码: &l ...

  7. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  8. vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件

    vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...

  9. vue cli3.0 结合echarts3.0和地图的使用方法

    echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...

  10. Vue 1.0 和 2.0 执行顺序

    // Vue 生命周期 // Vue 1.0 // 执行步骤:选项/生命周期钩子 // 1 init // 2 created // 3 beforeCompile // 4 compiled // ...

随机推荐

  1. org.springframework.dao.DataIntegrityViolationException:

    数据库用的hibernate,开发工具用的myeclipse,使用开发工具连接数据库生成hibernate基于xml的po类,运行时报org.springframework.dao.DataInteg ...

  2. PHP 生成验证码

    //加载 vendor目录的phpqrcode.类文件 $a = vendor("phpqrcode.qrlib");// 创建目录 echo mkdir(__ROOT__.'/U ...

  3. 在eclipse上跑hadoop的helloworld

    关于hadoop的用处什么我就不说了,在这里记录下在eclipse上第一次跑hadoop遇到的问题吧~ hadoop的安装我就不说啦,网上教程一大堆~我直接用的公司的Linux上的hadoop. ec ...

  4. Windows Azure 将正式更名为 Microsoft Azure

    微软的公共云平台在2014年4月3日正式从Windows Azure 更名为Microsoft Azure. windows azure是二级产品名,microsoft azure是一级产品名,和mi ...

  5. python 查找指定内容的txt文件

    程序设计思路:1. 利用os.walk()找出所有的文件;2.利用正则找到指定后缀的文件:3.找到需要的txt文件后,通过open().readlines()读取文件中每行数据;4.读取后,保存正则匹 ...

  6. Linux中的命令 make -f 是什么意思

    出处:http://cache.baiducontent.com/c?m=9f65cb4a8c8507ed4fece7631046893b4c4380146d96864968d4e414c422460 ...

  7. 技术之余。。。电吉他自弹 魂斗罗 solo

    测试一下 ---恢复内容开始--- ---恢复内容结束---

  8. Ubuntu14 sudo apt-get install apt-show-versions出错

    vmware安装ubuntu后,sudo apt-get install apt-show-versions出现问题 E: Unable to locate package apt-show-vers ...

  9. CAS 集群部署session共享配置

    背景 前段时间,项目计划搞独立的登录鉴权中心,由于单独开发一套稳定的登录.鉴权代码,工作量大,最终的方案是对开源鉴权中心CAS(Central Authentication Service)作适配修改 ...

  10. vueJs+webpack单页面应用--vue-router配置

    vue-route版本要跟vue版本同步,我的vue用的2.0+的,vue-router 也用了最新版2.1+ npm安装vue-router: $ npm install vue-router -- ...