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


Posted in Javascript onDecember 06, 2016

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

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

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

项目预览:

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

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 属性

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

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
})

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

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

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

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

Javascript 相关文章推荐
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 Javascript
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
vue实现下拉菜单树
Oct 22 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 #Javascript
JavaScript定时器实现的原理分析
Dec 06 #Javascript
原生js实现弹出层登录拖拽功能
Dec 05 #Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 #Javascript
原生js编写基于面向对象的分页组件
Dec 05 #Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 #Javascript
浅谈Node.js:Buffer模块
Dec 05 #Javascript
You might like
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
功能强大的php文件上传类
2016/08/29 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
python实现的多线程端口扫描功能示例
2017/01/21 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
django 模型字段设置默认值代码
2020/07/15 Python
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
岗位职责风险防控
2014/02/18 职场文书
反腐倡廉标语
2014/06/24 职场文书
挂职学习心得体会
2014/09/09 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
硕士论文致谢范文
2015/05/14 职场文书
活动宣传稿范文
2015/07/23 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python