Vue项目搭建完整剖析全过程

Vue项目搭建完整剖析全过程

项目源码地址：https://github.com/ballyalex 有帮助的话就加个星星呗~！ 

项目技术栈：vue+webpack+bower+sass+axios

MINGW64使用简介：

在运行项目的目录下开启，其中，ctrl+c是退出，clear是清除。

NPM使用技巧：

国内网络访问npm的速度是比较慢的，所以我们可以采用淘宝开发的cnpm代替。

方便调试查看工具：

谷歌浏览器的vue插件。

Vue模块介绍：

vuex: 管理核心数据

vue-router: 路由，单页面应用

axios: 交互，取代之前的vue-resource

vue组件介绍：

每个vue组件中都有三个部分组成：

template script style

其中style可以加上scoped属性，表示局部样式。

该项目中用到的es6简单介绍：

导入模块： import 名称 from 位置(其中.js结尾的js可以忽略不写)

导出模块：export default{}

箭头函数简单示例：

es5：function(h){ return h(App) }

es6：h => h(App)

该项目用到的sass介绍：

语法如:ul li{}  ul li a{} 可以将li下面的标签进行合并,ul li{ a{}}。

 

该项目用到的bower介绍：

可以用bower来下载包，如animate.css等

 

项目介绍

该项目包含三个标签页，分别是首页home、社会follow、科技column

其中页面数据均采用的是mock数据

一、项目准备

1、用vue初始化一个vue项目（脚手架）

vue init webpack-simple vue-news

其中，webpack-simple也可以代替为simple（简单）或webpack（提供单元测试，eslint等）。

初始化完成之后，就可以安装该项目了。

cnpm install , 会生成一个文件夹node_modules。

紧接着我们运行该项目，cnpm run dev。

提醒：

1)、有时候在run dev的时候，会出现一些错误，比如说node的版本有问题，或者其他依赖有问题，那么比较方便的做法就是把刚刚生成的node_modules文件夹给删除掉，重新install一次，一般这时候run dev的时候就正常了。

2)、端口冲突，这时候就要改package.json中的scripts下面的dev。在这一行的最后，我们可以加上一个--port 8001。这时候这个项目的端口就被我们改成8001了。重新运行cnpm run dev，就能在8001端口打开该项目了。

2、了解该vue-news中的文件夹。

1)、分析根目录

1.1)、package.json：

scripts中的dev即为我们刚开始run的那个dev。

scripts中的build即为我们最后打包的那个build。

1.2)、index.html

id为app的组件为根组件。

build.js为最后webpack打包生成的js文件。

1.3)、webpack.config.js

在该文件中我们可以看到很多个json，其中这些是用来识别js、css、图片等格式的。

比如说要在js文件中用到css模块，就必须先下载style-loader和css-loader。然后在该webpack.config.js中进行配置。

cnpm install style-loader css-loader -D (也可以是--save-dev)

下载loader为

2)、分析src：

2.1)、App.vue

这个为根vue组件。我们可以把里面的内容清空，用来写我们自己的东西。

2.2)、main.js

这个为入口文件，导入了vue模块和App模块。

其中render函数采用了es6的写法，h => h(App) 等同于function(h){ return h(App) }；

3)、assets文件夹

这个文件夹专门是用来放置一些静态资源的。可以放置images、css、js。

4)、components文件夹

在assets同级目录下新建一个文件夹叫做components，用来存放我们在该vue项目中用到的所有vue文件。

二、开始vue项目

1、对根目录下的index.html先写入一些格式化的meta标签。（诸如适配移动端）。

2、在css目录下建立一个reset.css文件，用于重置样式。https://git.io/normalize，并在main.js中全局引入。

3、分析项目：

分析首页构成：

顶部有三个tab切换，

中间是具体的新闻展示，

底部是底部切换。

4、先实现顶部的三个tab切换。将它作为一个组件。新建一个Nav.vue，用于存放这三个tab。

提醒：在vue2.0中template里面的内容必须用一个大的div包裹。同时，将该Nav.vue导入到App.vue中，并输出export。

5、三个tab页分别对应着三个vue组件：Home.vue、Follow.vue、Column.vue。

Home.vue中包括一个轮播图，把轮播图拆成一个组件Slider.vue。

Slider.vue中：

将该轮播图所用到的js放在methods下面新建一个函数fnSlider，

在新建一个mouted表示模板编译完成，调用该函数this.fnSlider。

Home.vue中引入该Slider。

新建一个循环，将mock数据data文件下的index.data循环输出。

因为返回的是一个数组，所以需要先在data函数中返回该数组arrList

因为用到了Slider组件，所以需要在components中输出该组件

封装获取数据的函数fetchData，用axios获取数据。将返回的数据赋值给arrList数组。

提醒：

axios使用指南：

1)、首先需要intall axios

2)、在main.js中，import axios。

3)、为了更方便容易看懂使用axios，将axios挂到Vue的原型上，方便调用：

Vue.prototype.$http = axios;

所以在Home.vue中用axios获取数据就可以写成：

this.$http.get('').then(function(){}).catch(function(err){})

Follow.vue和Column获取数据同上。

6、实现首页、社会、科技三个页面之间的跳转，

这时候就要用到vue-router了。

6.1)、首先是下载install vue-router

6.2)、在main.js中引入import VueRouter from 'vue-router'

然后Vue.use(VueRouter)

接着const router=new VueRouter({routes})

6.3)、在Nav.vue中，将即将切换的每个li替换为router-link to="/url " tag="li"，同时，        在App.vue中加入<router-view></router-view>，以便实现路由切换的显示。

6.4)、为了便于管理很多路由，便可以在main.js的同级目录下建立一个routeConfig.js.

相对应的输出一个数组：

数组中有很多json，如{path:'/home',component:Home}

每个目录对应着每个组件。同时，要用到的每个组件都必须在顶部导入import。

最后需要添加一个path:'/'和path:'*'，表示一访问，或者输入找不到的地址跳转Home

提醒1：有时候页面上跳转的是时候有个#号，这时候可以在new VueRouter下添加        一个mode: 'history'。

提醒2：有时候页面上li标签很多的时候，切换路由无法回到最上面，这是，可以        在new VueRouter下添加一行：scrollBehavior: () => ({ y: 0 }),

7、测试路由，运行成功。

8、底部也有一个切换。原理同上做路由切换。

9、Vuex使用指南：

问题：点击底部 我的/user-info 按钮的时候，路由跳转过来，顶部的菜单页还依旧存在。

分析：要让切换到 我的/user-info 按钮的时候 ，顶部菜单消失，切回到首页的时候，顶部菜单出现，这时候就要用到vuex。

官方文档解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

在这里，我们可以用它来管理我们的状态。

1)、安装install vuex

2)、新建一个文件夹store，用于存放vuex的管理文件，index.js、getter.js、actions.js、mutations.js，参考官网提供的中vuex图片。

3)、首先我们回到App.vue中，在输出中加入一个watch监听器：

我们使用$route(to,from){ console.log(to.path,from.path) },可以发现，该函数能输出到达的路径和原来的路径。

于是我们能通过检测目标路径是否是/user-info来判断发送哪个通知

(showHeader , hideHeader)。

3.1)、Dispatch发给Actions，所以先在actions.js中导出showHeader和hideHeader。

3.2)、Actions通过commit发送给Mutations

3.3)、在mutations中设置状态header初始为true。并通过mutations来调用state。

10、添加一个loading状态。

原理：请求数据过程中，loading显示，请求数据完毕，loading消失。

需要在main.js中先配置axios。

配置如下：

//关于axios配置，比如发送请求显示loading，请求回来loading消失之类的

axios.interceptors.request.use(function (config) {  //配置发送请求的信息

store.dispatch('showLoading')

return config;

}, function (error) {

return Promise.reject(error);

});

axios.interceptors.response.use(function (response) { //配置请求回来的信息

store.dispatch('hideLoading')

return response;

}, function (error) {

return Promise.reject(error);

});