vue 2.0 开发实践总结之入门篇

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)

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

3. 运行

4. 构建

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

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

vue支持scss 配置

1.安装以下模块
2.打开webpack.base.config.js在loaders里面加上
3.在需要用到scss的地方写上

2. 项目整体架构 

项目整体目录如下

main.js

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

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

 

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

app.vue

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

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

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

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

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

 

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

如果有任何出错的或者更好的,请联系我或者评论!

完整的源码地址:  https://github.com/beidan/photoShare

 

欢迎 star 

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

3 23 收藏 评论

关于作者:陈被单

热爱前端,欢迎交流 个人主页 · 我的文章 · 19 ·   

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部