本文涉及到webpack、node.js、vue、vue-router、vuex、axios、less、element-ui、es6、git等相关知识。

1、前提基础

• vue.js有著名的全家桶系列，包含了vue-router、vuex、axios，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。
• 学习本文之前需要掌握基本的js、css、html基础知识
• node.js、git、webpack基础知识
• 对vue.js、vuex等有基本的了解
• vue官网：
• vue-router官网：

2、开发环境

1. 安装node.js,直接去官网下载安装包即可：，安装完成以后可以打开cmd/git,通过node -v/npm -v 查看版本。

2. 安装webpack, 通过npm install -g webpack全局安装。
3. 安装git(用于代码管理)，直接百度下载安装包即可

3、开始开发

1. 这里我们采用vue-cli搭建一个新的项目，所以需要先安装脚手架 npm install --g vue-cli。
2. 初始化一个项目：vue init webpack vue_demo_project，因为要用到vue-router,所有这里选择安装vue-router，建议安装ESlint，有助于养成良好的编程习惯。

3. 安装依赖：cd vue_demo_project, npm install (如果安装速度较慢，可以使用cnpm安装，npm install -g cnpm --registry=https://registry.npm.taobao.org)。
4. 在编辑器中打开项目，在根目录下运行npm run dev。默认是8080 端口，可以在config里的index.js修改。

ps：建议将build 里的assetsPublicPath的路径前缀修改为 ' ./ '，因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。

3、路由配置

1. 按下图所示新建pages,layout文件夹，新建vue文件（这里NewDetails组件的path应该为'/new_details'）。

2. 如图所示配置路由文件。页面效果如下：

4、按需加载和路由鉴权

1. 安装vuex（cnpm i vuex -S）,修改router下的index.js文件如下图所示，采用按需加载：

2. 效果如下所示：

3. 点击按钮跳转到新闻详情页面，由于详情页需要登录权限，重定向到了登录页面，并保留了重定向之前的页面路由，登录之后可以直接跳转至新闻详情页。

5、axios的使用以及拦截器的设置。

1. 安装axios（cnpm i axios -S）,使用并设置拦截器，如果所示：

2. 点击按钮获取菜单数据，这里使用express启动服务，封装菜单api接口来模拟实际场景。

3. 点击按钮，效果如图所示。

6、api集中管理与按需引用。

1. 对api的集中管理和按需引用有助于项目管理和重构，减轻vue实例的负担，优化项目性能。
2. 从main.js中删除require('./http')，修改http下index.js文件，修改home.vue中的接口引用。如图所示：

7、css预处理语言的使用以及UI的使用。

1. 使用css预处理有利于优化性能、提高开发效率。减少css浏览器兼容性代码、增大代码复用率，减少重构时冗余css带来的困扰。
2. ui的使用可以大大加快前端页面的构建速度，提搞开发效率。
3. 本文以less以及element-ui为例：安装cnpm i -S less less-loader element-ui，在main.js中使用。

4. 在Login.vue文件中使用element-ui的form组件，如图：
   form组件，html部分
   form组件，js部分
   form组件，css部分，页面效果如下：

5. 修改router.js文件，将login组件提取到父级，编写登录页面和api，如下图所示

6. 在Login.vue文件中使用，进行登录校验并保存token到store中

7. 修改登录成功的方法，使登录成功后跳转首页或者到重定向的页面。

8. 刷新页面（刷新之后，store将初始化），重新来一遍，测试路由鉴权是否生效。
   点击查看详情的按钮，由于详情页需要登录权限，没有登录，页面被重定向到了登录页。
   登录页面带了重定向的路由信息，点击登录，登录成功后，页面跳转到详情页。路由重定向成功。
   回到首页，再点击查看详情按钮，由于用户已登录，我们已保存token信息到store中，此时发现页面直接跳转到详情页。到此，路由鉴权成功(再次过程中，不要刷新页面,否则token信息将丢失，页面将再次跳转到登录页)。

8、vuex的使用以及解决页面刷新store信息初始化的问题。

• vuex基础知识介绍

1. 之前的例子中，在测试路由鉴权时已经简单的使用vuex的功能，当然那时也可以使用一个全部变量来代替，接下来开始vuex之旅。安装cnpm i vuex -S。(vuex官网：)
2. 修改store下的index.js文件，新建state.js,getters.js,mutations.js,actions.js,下面我们模拟一个todoList,效果如下图所示：

3. 上述只是对vuex使用的简单介绍，其功能远不止于此，如vuex的模块化，命名空间等可以自行去官网查看，后面也会在nuxt、ssr、element-ui组件化等文中做出相关介绍。

• 上面我们简单的介绍了下vuex的核心功能模块，现在开始解决之前遗留的刷新store初始化的问题。

1. 分析问题的原因，由于store是保存在本地的数据，当页面刷新之后，数据将回到最初始状态。怎么解决？需要将保存在token中信息保存起来，在页面刷新之后重新赋值给token。
2. 方法：（1）保存在数据库。（2）保存至cookie或者storage。
3. 我们选择使用storage做演示。现在需要修改login.vue的login方法和header.vue，在main.js中添加refreshUserInfo的方法，新建utils文件夹，添加对应的方法，实例代码如下：

4. 回到首页，刷新页面，一步步来操作验证。页面效果如下：

5. 一开始没有用户信息，header提示登录，点击详情按钮，由于没有登录，没有访问权限，将被重定向到登录页面，点击登录。

6. 登录成功之后，header显示退出按钮，此时在点击详情按钮，发现直接跳转到详情页面，刷新页面之后，再次点击，还是到详情页。此时打开控制台（f12），看到token信息保存在local storage中。

7. 点击退出按钮，发现头部显示登录按钮，local storage中token也被清除了。

8. 此时回到首页，在点击详情按钮，发现又到了登录页。
9. 到此，我们整个流程基本结束。当前，在实际的项目中，登录和退出都是需要请求后台接口的。大多时候选择cookie来实现。使用cookie的方式基本和使用localStorage相同，可以自行安装使用js-cookie（cnpm i -S js-cookie）来模拟, 使用get/set/remove替换storage的getItem/setItem/removeItem即可。

9、项目结构介绍。

10、打包上线

1. npm run build 打包之后会生成dist文件，将dist下的文件全部放在服务器目录下即可。
2. 需要提醒的时，本文仅用于演示，在实际开发中，需要对接后台的api服务，如果是采用静态站点部署的项目，可以直接删除server文件夹。
3. 如果是非静态部署的项目，比如本文的server部分的代码或者是使用的nuxt、或者ssr项目。项目需要运行在node环境下，并启动node服务，此时需要修改package.json以及build.js文件，将服务端的代码也打包进去。服务器上也需安装node.js并启动node服务，可以使用pm2来管理node进程。
4. 本文到此结束，后续我还会继续写nuxt、react等项目的构建、以及vue常用功能的配置以及组件封装，如，svg、富文本、组件树、循环嵌套的表单、附件的上传下载与导出、将页面保存成word等。