创意电子

标题: Vue + ElementUI 后台管理网站基本框架之创建项目（附源码） [打印本页]

作者: 程序员小新人学习 时间: 2018-6-11 10:25
标题: Vue + ElementUI 后台管理网站基本框架之创建项目（附源码）

创建工程目录
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
请注意，该源码会不停更新（因为工作很忙不能保证定期更新）

作者: 现代图像识别 时间: 2018-6-11 13:39
转发了

作者: 是的没有蛀牙 时间: 2018-6-11 13:44
转发了

作者: 一个废柴的日常生活 时间: 2018-6-11 14:31
小编工作了没？

作者: 还有希望 时间: 2018-6-11 16:59
……

作者: 二珂17 时间: 2018-6-11 23:39
转发了

作者: forline 时间: 2018-6-12 09:04
我就用的这一套，ui勉强够用吧

作者: JingshengLiu 时间: 2018-6-13 21:03
转发了

作者: 货吃里的哲学人生 时间: 2018-6-13 23:50
转发了

作者: 如初悠悠 时间: 2018-6-15 01:06
@简单不是生活

作者: 厚德大灵 时间: 2018-6-30 18:46
element垃圾，我只用vue，其它自己写

作者: Fund188 时间: 2018-6-30 20:07
//@前端侠:转发了

作者: 街首新区 时间: 2018-7-3 18:51
node.js?

作者: 街首新区 时间: 2018-8-2 09:08
有个什么入门，初级点的吗？

作者: 用户1142203304623 时间: 2018-8-16 21:10
转发了

作者: 愤怒的developer 时间: 2018-8-16 23:16
转发了

作者: 深漂宅男生活 时间: 2018-8-16 23:18
转发了

作者: 小k56 时间: 2018-8-27 09:48
下载看看

作者: 靖丶靖 时间: 2018-9-3 07:07
转发了

作者: 单挑巴里亚狂砍八分 时间: 2018-9-19 07:25
转发了

作者: sgtgong 时间: 2019-7-23 11:23
麻烦复制的时候排下版

欢迎光临创意电子 (https://wxcydz.cc/)