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

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

整体项目采用 vue + vue-router + vuex （传说中的vue 全家桶），构建工具使用尤大大推出的vue-cli@H_404_1@

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

项目预览：@H_404_1@

@H_404_1@@H_404_1@

1 .vue-cli构建工具必知

@H_404_1@

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

webpack 基本知识点：@H_404_1@

entry：入口点，webpack会从入口点设置的js文件开始对项目进行构建，过程中，所有入口点文件和路径；@H_404_1@

output：中设置打包好的文件的输出路径还有文件名；@H_404_1@

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

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

vue-cli 安装@H_404_1@

1）. 首先，安装 vue-cli。(确保你有 node 和 npm) @H_404_1@

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

3）. 运行 @H_404_1@

4）. 构建 @H_404_1@

生成 dist 目录，将dist目录放在服务器上，使用服务器上访问index.html的url即可 @H_404_1@

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

修改这里成你项目放置静态文件的目录 assetsPublicPath: './',//修改这里成你项目放置静态文件的目录 } }

在静态文件 index.html 文件下，引用静态文件@H_404_1@

404_1@

vue支持scss 配置@H_404_1@

1）.安装以下模块 @H_404_1@

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

2）.打开webpack.base.config.js在loaders里面加上 @H_404_1@

3）.在需要用到scss的地方写上 @H_404_1@

@H_404_1@

2. 项目整体架构

@H_404_1@

项目整体目录如下@H_404_1@

package.json@H_404_1@

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

main.js@H_404_1@

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

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

@H_404_1@@H_404_1@

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

app.vue@H_404_1@

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

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

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

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

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

@H_404_1@ @H_404_1@

后续更新项目中遇到的难点，以及vuex使用～@H_404_1@

本文已被整理到了《》，欢迎大家学习阅读。@H_404_1@

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 @H_404_1@

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

1 .vue-cli构建工具必知

2. 项目整体架构

猜你在找的Vue相关文章