vue全家桶

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

一、前提基础

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

二、开发环境

  1. 安装node.js,直接去官网下载安装包便可:nodejs.org/en/,安装完成之后能够打开cmd/git,经过node -v/npm -v 查看版本。
  2. 安装webpack, 经过npm install -g webpack全局安装。
  3. 安装git(用于代码管理),直接百度下载安装包便可

三、开始开发

  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 文件时,若是路径以 ' / ' 开头,在本地是没法找到对应文件的(服务器上没问题)。因此若是须要在本地打开打包后的文件,就得修改文件路径。css

三、路由配置

  1. 按下图所示新建pages,layout文件夹,新建vue文件(这里NewDetails组件的path应该为'/new_details')。
  2. 如图所示配置路由文件。页面效果以下:

四、按需加载和路由鉴权

  1. 安装vuex(cnpm i vuex -S),修改router下的index.js文件以下图所示,采用按需加载:

2. 效果以下所示:
3. 点击按钮跳转到新闻详情页面,因为详情页须要登陆权限,重定向到了登陆页面,并保留了重定向以前的页面路由,登陆以后能够直接跳转至新闻详情页。

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

  1. 安装axios(cnpm i axios -S),使用并设置拦截器,若是所示:
  2. 点击按钮获取菜单数据,这里使用express启动服务,封装菜单api接口来模拟实际场景。
  3. 点击按钮,效果如图所示。

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

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

七、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信息将丢失,页面将再次跳转到登陆页)。

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

  • vuex基础知识介绍
  1. 以前的例子中,在测试路由鉴权时已经简单的使用vuex的功能,固然那时也可使用一个所有变量来代替,接下来开始vuex之旅。安装cnpm i vuex -S。(vuex官网:vuex.vuejs.org/zh/guide/)
  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便可。

九、项目结构介绍。

十、打包上线

  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等。
相关文章
相关标签/搜索