Vue + ElementUI 手撸后台管理网站基本框架(一)创建项目

本章主要讲述项目的创建及Webpack的修改。如果你已经足够了解这部分知识，请直接移步至下一章。

使用vue-cli创建项目

---

Vue.js项目提供了一个官方的命令行工具，它能让我们更加快速的创建一个基于vue和webpack的单页面应用。

# 全局安装vue-clicnpm install vue-cli -g# 选择你的项目根文件夹# e:# cd vue-project# 创建webpack项目# vue init [vue-cli模板名称] [项目文件夹]vue init webpack my-project# 安装依赖cnpm install

在安装中有自动提示，要求输入项目名称、描述、作者、关键字、是否使用eslint、是否加入单元测试。有需求的话按照提示直接输入或选择即可，没有需求的话一路按回车和Y就行了。
当完成上述步骤后，你就能够在e:\vue-project\my-project中找到自动生成完毕的项目。

不过vue-cli生成的项目模板仅包含了vue及vue-router。接下来我们需要自行安装我们需要的插件。除vuex及elementui外，我们还需要安装axios进行ajax请求，安装mockjs来模拟返回数据。

# 安装其他插件cnpm install vuex elementui axios mockjs --save

创建子目录

---

根据实际开发需求，在src文件夹中创建对应的文件目录。良好的目录可以为今后的开发工作节省很多不必要的麻烦。以下是我的项目目录精简版，随着开发的不断进行可能还会增加吧..

./root├── ...├── src                                     │   ├── components│   │   ├── platformCom                    // 平台通用组件│   │   │   ├── ...│   │   │   ├── install.js                // 平台全局组件注册│   │   ├── customCom                      // 项目组件│   │   │   ├── global                    // 项目全局组件│   │   │   │   ├── ...     │   │   │   │   ├── install.js           // 项目全局组件注册│   │   │   ├── locale                    // 项目局部组件│   ├── mock/                              // mock模拟│   ├── page                               // 项目页面│   │   ├── ...                            // 页面名称│   │   │   ├── *.vue│   │   │   ├── ...                       // 与该页面相关的其他文件│   ├── util              │   │   ├── http.js                        // ajax全局设置│   │   ├── ...│   ├── store                               │   │   ├── modules/                        │   │   ├── state.js                        │   │   ├── getter.js                      │   │   ├── mutations.js                    │   │   ├── actions.js                     │   │   ├── index.js│   ├── router│   │   ├── asyncRouter.js                 // 异步路由│   │   ├── index.js                       // vue-router路由配置│   ├── index.html                          // 单页面应用根模板│   ├── index.vue                           // 首页vue│   ├── main.js                             // webpack入口文件├── ...

创建基础页面

---

在一切开始之前，我们需要先创建几个内容页面，以便为接下来的说明提供基本的页面基础。这个阶段你需要至少建立以下页面

• 登录页面
• 登录后的系统首页
• 错误页面

以上三种页面你可以随意书写，这里单独列出只为后续的路由配置提供基础的页面。下面是我所建立的页面

├── src│   ├── page│   │   ├── layout│   │   │   ├── header.vue  // 框架头│   │   │   ├── layout.vue  // 框架│   │   │   ├── navItem.vue // 导航菜单│   │   │   ├── nav.vue     // 导航菜单│   │   ├── home│   │   │   ├── home.vue    // 首页│   │   ├── error│   │   │   ├── error.vue   // 错误页面框架│   │   │   ├── 401.vue     │   │   │   ├── 403.vue│   │   │   ├── 404.vue│   │   ├── login│   │   │   ├── login.vue   // 登录页面

优化工程配置

---

vue-cli默认生成的项目工程有一部分需要进行修改，以更好的适应实际开发。这里仅列举针对工程的全局修改，在实际开发中可能会有更多的修改，比如增加loader等

增加babel-polyfill

vue-cli默认生成的项目中自带了babel-plugin-transform-runtime，其保证了一定的浏览器兼容性。但其存在两个问题：

1. 异步加载组件时，会产生 polyfill 代码冗余
2. 不支持对全局函数与实例方法的 polyfill

介于以上两种缺点，我们需要增加babel-polyfill，同时删除babel-plugin-transform-runtime

在命令行中输入以下命令

# 安装babel-polyfillcnpm install babel-polyfill --save# 卸载babel-plugin-transform-runtimenpm uninstall babel-plugin-transform-runtime --save

修改文件.babelrc

"plugins": [    // "transform-runtime"],

在入口文件main.js中引入babel-polyfill

import 'babel-polyfill'

增加路径别名

在实际开发中，往往某些路径层级很深，可能会有无数的../../这类路径选择。为解决这种问题，我们可以增加路径别名，以减少开发过程中路径的复杂性。

修改文件：webpack.base.conf.js

resolve: {    extensions: ['.js', '.vue', '.json'],    alias: {      'vue$': 'vue/dist/vue.esm.js',      '@': resolve('src'),      'sysComponents': '@/components/locale',      'util': '@/util',      'asset': '@/asset'      ...    }}

修改单页面应用根模板index.html位置

每个项目组的习惯可能不同，我更喜欢把根模板放置到src目录中。这条修改可按照实际开发自行决断。

修改开发环境webpack.dev.conf.js

new 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',    inject: true,    // minify: {      // removeComments: true,      // collapseWhitespace: true,      // removeAttributeQuotes: true      // more options:      // https://github.com/kangax/html-minifier#options-quick-reference    // },    // necessary to consistently work with multiple chunks via CommonsChunkPlugin    chunksSortMode: 'dependency'}),

修改chunk文件名

我自己更加习惯于使用自定义的chunk文件名，如果你在开发中也是不希望看到各种以数字开头的文件名的话，也和我一样直接修改即可。
修改文件：webpack.prod.conf.js

output: {    path: config.build.assetsRoot,    filename: utils.assetsPath('js/[name].[chunkhash].js'),    // chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')    chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')}

完善各种类型的css-loader

在build/utils.js 中我们可以看到，vue-cli项目自动帮我们判断了需要哪些css的loader。如果你想以后不再轻易动package.json的话，你完全可以把这些loader都安装上。其中安装sass-loader前需要提前安装node-sass。安装less-loader前需要安装less。以下为安装sass-loader和less-loader

cnpm install node-sass sass-loader less less-loader --save-dev

NEXT——路由篇

---

在项目骨架（基本配置）完成后，我们将开始编写项目的筋——路由。同时在该篇中会涉及到权限控制，我们会根据权限生成需要路由即异步路由的实现

本系列目录

---

• Vue + ElementUI 手撸后台管理网站基本框架(零)前言篇
• Vue + ElementUI 手撸后台管理网站基本框架(一)创建项目
• Vue + ElementUI 手撸后台管理网站基本框架(二)权限控制
• Vue + ElementUI 手撸后台管理网站基本框架(三)登录及系统菜单加载