爱音乐的程序员小新人 潜水
  • 2发帖数
  • 2主题数
  • 0关注数
  • 0粉丝
开启左侧

Vue + ElementUI 后台管理网站基本框架之创建项目(附源码)

[复制链接]
 楼主| 爱音乐的程序员小新人 发表于 2018-6-11 10:25:40 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

  • 创建工程目次
  • ajax插件选择
  • 模拟ajax返回数据
  • 跨域问题
  • 优化webpack配置
  • 增加babel-polyfill
  • 增加路径别名
  • 修改单页面应用根模板index.html位置
  • 修改chunk文件名
  • 完善各种类型的css-loader
  • NEXT——路由篇
  • 源码
  • 本系列目次
创建工程目次

<hr>在开始一切的讲解前,我们先创建一个全新的工程。保举直接利用vue官方提供的下令行工具vue-cli,它能快速的天生一个基于vue和webpack的单页面应用。
# 全局安装vue-clinpm install vue-cli -g# 选择你的项目根文件夹# e:# cd vue-project# 创建webpack项目# vue init [vue-cli模板名称] [项目文件夹]vue init webpack my-project# 安装依赖npm install12345678910111213在安装中有主动提示,要求输入项目名称、形貌、作者、关键字、是否利用eslint、是否加入单元测试。有需求的话按照提示直接输入或选择即可,没有需求的话一起按回车和Y就行了。
当完成上述步骤后,你就可以或许在e:\vue-project\my-project中找到主动天生完毕的项目。然后大家可以根据实际需要或者编写习惯来创建此中的具体目次。以下为参考目次:
|- src/| |- assets/ // 静态文件目次:css、images等| |- components/ // 组件文件目次| |- page/ // 具体业务页面目次| |- router/ // vue-router的路由目次| |- store/ // vuex目次| |- util/ // 工具类目次|- main.js // webpack入口文件|- App.vue // 入口页面123456789ajax插件选择

<hr>在jQuery时代,ajax的利用一般直接用jQuery自己提供的就好。但是当利用vue作为底层开发框架时,因很少再去直接操作DOM的关系,jQuery本身就很少被提及了。所以这里保举大家利用axios作为ajax插件,这也是vue官方所保举的插件。axios的安装和利用都很简单,但其在项目中的具体配置会在以后的章节中涉及,此处不做详细讨论。现在我们只需要知道它能实现ajax就可以了。
模拟ajax返回数据

<hr>在实际的开发过程中,经常会遇到前端需要后端的数据,但后端并没有完成该功能的环境。这种问题有很多种办理方案,比如搭建一个前后端公用的Mock Server。不过在项目前期如果没有充足准备的话,对于前端同学来说,利用Mockjs来实现这个需求则更加方便、快速一点,和项目本身集成到一起,不用再搭建服务器了。
注意:在当地项目中集成Mockjs,只应该用于前期开发或工作比较忙的时间,后期还是应该有同一的API测试平台,保证前后端都能通过该平台测试自己的功能,并可以或许对API协议进行同一管理。
跨域问题

<hr>如果在开发过程中,ajax请求地点非本服务相同主机和相同端口,则会因浏览器自身的安全机制,导致出现跨域问题。办理该问题最好的方法是让后台同学配置CORS,或者在webpack中设置proxyTable,或者自己搭建nginx服务进行反向代理。
这里主要说一下关于webpack中proxyTable的设置(其实是vue-cli天生的项目自带的配置项)。请注意,webpack的proxyTable只在开发环境中有用!以下说明均引用自vue-cli对webpack模板的说明,这里为原文链接:vuejs-templates
在config/index.js中编辑dev.proxyTable项,以设置代理规则。在开发环境中,实际上利用的是http-proxy-middleware插件实现的代理功能,所以它的详细用法你应该参考其官方文档,这里有个简单的例子:
// config/index.jsmodule.exports = { // ... dev: { proxyTable: { // 所有以/api 为前缀的请求将被代理到http://jsonplaceholder.typicode.com // 即 /api/getNav -> http://jsonplaceholder.typicode.com/getNav '/api': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } }}1234567891011121314151617优化webpack配置

<hr>vue-cli默认天生的项目工程虽然很全,但仍有一部分需要进行修改,以更好的顺应实际开发。这里仅列举针对工程的全局修改,在实际开发中可能会有更多的修改,比如增加loader等
增加babel-polyfill
vue-cli默认天生的项目中自带了babel-plugin-transform-runtime,其保证了肯定的浏览器兼容性。但其存在两个问题:

  • 异步加载组件时,会产生 polyfill 代码冗余
  • 不支持对全局函数与实例方法的 polyfill
  • 介于以上两种缺点,我们需要增加babel-polyfill,同时删除babel-plugin-transform-runtime
在下令行中输入以下下令
# 安装babel-polyfillnpm install babel-polyfill --save# 卸载babel-plugin-transform-runtimenpm uninstall babel-plugin-transform-runtime --save12345修改文件.babelrc
"plugins": [ // "transform-runtime"],123在入口文件main.js中引入babel-polyfill
import 'babel-polyfill'1增加路径别名
在实际开发中,某些路径层级可能会很深,如果利用相对路径可能会有无数的../../。为办理这种问题,我们可以增加路径别名,以减少开发过程中路径的复杂性。
修改文件:webpack.base.conf.js
resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'util': '@/util', 'asset': '@/asset' ... }}12345678910修改单页面应用根模板index.html位置
webpack默认的根模板路径与src目次同级。但我更喜欢把根模板放置到src目次中。如果你也有像我如许的需求,那么按以下修改即可
// 开发环境:webpack.dev.conf.jsnew HtmlWebpackPlugin({ filename: 'index.html', // template: 'index.html', template: './src/index.html', inject: true})// 生产环境`webpack.prod.conf.js`new HtmlWebpackPlugin({ filename: config.build.index, // template: 'index.html', template: './src/index.html', ...}),123456789101112131415修改chunk文件名
如果你不渴望看到各种以数字开头的文件名的话,可以按照以下方式修改。如果你觉得hash太长,也可以限定其长度
// webpack.prod.conf.jsoutput: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), // chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') chunkFilename: utils.assetsPath('js/[name].[chunkhash:7].js')}1234567完善各种类型的css-loader
在build/utils.js 中我们可以看到,vue-cli项目主动帮我们判定了需要哪些css的loader。如果你想以后不再轻易动package.json的话,你完全可以把这些loader都安装上。此中安装sass-loader前需要提前安装node-sass。安装less-loader前需要安装less。以下为安装sass-loader和less-loader
npm install node-sass sass-loader less less-loader --save-dev1NEXT——路由篇

<hr>项目创建及配置完毕后,我们将开始编写后台管理系统中最紧张也是最基础的部分——路由及其权限。基于权限的页面跳转将会是重中之重。
源码

<hr>当前源码地点:https://github.com/harsima/vue-backend
请注意,该源码会不断更新(由于工作很忙不能保证定期更新)

                               
登录/注册后可看大图

精彩评论20

让计算机看懂世界 发表于 2018-6-11 13:39:02 | 显示全部楼层
转发了
是的没有蛀牙 发表于 2018-6-11 13:44:54 | 显示全部楼层
转发了
一个废柴的日常生活 发表于 2018-6-11 14:31:07 | 显示全部楼层
小编工作了没?
还有希望 发表于 2018-6-11 16:59:58 | 显示全部楼层
……
二珂17 发表于 2018-6-11 23:39:04 | 显示全部楼层
转发了
forline 发表于 2018-6-12 09:04:11 | 显示全部楼层
我就用的这一套,ui勉强够用吧
JingshengLiu 发表于 2018-6-13 21:03:45 | 显示全部楼层
转发了
如初悠悠 发表于 2018-6-15 01:06:23 | 显示全部楼层
@简单不是生活
厚德大灵 发表于 2018-6-30 18:46:09 | 显示全部楼层
element垃圾,我只用vue,其它自己写
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

猜你喜欢
在线客服QQ
2241998733

24x7小时免费咨询

Powered by 创意电子 ©2018-现在 专注资源实战分享源码下载站联盟商城繁体中文