1.安裝 nodejs
2.安裝 git
3.下載?vue-element-admin
建議本項(xiàng)目的定位是后臺(tái)集成方案，不太適合當(dāng)基礎(chǔ)模板來進(jìn)行二次開發(fā)。因?yàn)楸卷?xiàng)目集成了很多你可能用不到的功能，會(huì)造成不少的代碼冗余。如果你的項(xiàng)目不關(guān)注這方面的問題，也可以直接基于它進(jìn)行二次開發(fā)。
集成方案:?vue-element-admin
基礎(chǔ)模板:?vue-admin-template
桌面終端:?electron-vue-admin
Typescript 版:?vue-typescript-admin-template?(鳴謝:?@Armour)
Others:?awesome-project
# clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git
# enter the project directory
cd vue-admin-template
# install dependency
npm install
# develop
npm run dev
啟動(dòng)成功
啟動(dòng)成功后刪除多余界面 router/index.vue
刪除后的界面如下
import Vue from 'vue'import Router from 'vue-router'
Vue.use(Router)
/* Layout */import Layout from '@/layout'
/**
* Note: sub-menu only appear when route children.length >= 1
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
*
* hidden: true?????????????????? if set true, item will not show in the sidebar(default is false)
* alwaysShow: true?????????????? if set true, will always show the root menu
*??????????????????????????????? if not set alwaysShow, when item has more than one children route,
*??????????????????????????????? it will becomes nested mode, otherwise not show the root menu
* redirect: noRedirect?????????? if set noRedirect will no redirect in the breadcrumb
* name:'router-name'???????????? the name is used by (must set!!!)
* meta : {
??? roles: ['admin','editor']???control the page roles (you can set multiple roles)
??? title: 'title'?????????????? the name show in sidebar and breadcrumb (recommend set)
??? icon: 'svg-name'???????????? the icon show in the sidebar
??? breadcrumb: false??????????? if set false, the item will hidden in breadcrumb(default is true)
??? activeMenu: '/example/list'? if set path, the sidebar will highlight the path you set
? }
*/
/**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/export const constantRoutes = [
? {
??? path: '/login',
??? component: () => import('@/views/login/index'),
??? hidden: true
? },
? {
??? path: '/404',
??? component: () => import('@/views/404'),
??? hidden: true
? },
? {
??? path: '/',
??? component: Layout,
??? redirect: '/dashboard',
??? children: [{
????? path: 'dashboard',
????? name: 'Dashboard',
????? component: () => import('@/views/dashboard/index'),
????? meta: { title: 'Dashboard', icon: 'dashboard' }
??? }]
? },
? // 404 page must be placed at the end !!!
? { path: '*', redirect: '/404', hidden: true }]
const createRouter = () => new Router({
? // mode: 'history', // require service support
? scrollBehavior: () => ({ y: 0 }),
? routes: constantRoutes})
const router = createRouter()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465export function resetRouter() {
? const newRouter = createRouter()
? router.matcher = newRouter.matcher // reset router}
export default router
安裝ES6語(yǔ)法插件
npm install --save es6-promise
本人使用了自己寫的Axios 插件
http.js ↓
import Vue from 'vue';import Axios from 'axios';import {Promise} from 'es6-promise';
import {MessageBox, Message} from 'element-ui'
Axios.defaults.timeout = 30000; // 1分鐘
Axios.defaults.baseURL = '';
Axios.interceptors.request.use(function (config) {
? // Do something before request is sent
? //change method for get
? /*if(process.env.NODE_ENV == 'development'){
????? config['method'] = 'GET';
????? console.log(config)
? }*/
? if (config['MSG']) {
??? // Vue.prototype.$showLoading(config['MSG']);
? } else {
??? // Vue.prototype.$showLoading();
? }
? // if(user.state.token){//用戶登錄時(shí)每次請(qǐng)求將token放入請(qǐng)求頭中
? //?? config.headers["token"] = user.state.token;
? // }
? if (config['Content-Type'] === 'application/x-www-form-urlencoded;') {//默認(rèn)發(fā)application/json請(qǐng)求，如果application/x-www-form-urlencoded;需要使用transformRequest對(duì)參數(shù)進(jìn)行處理
??? /*config['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';*/
??? config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
??? config['transformRequest'] = function (obj) {
????? var str = [];
????? for (var p in obj)
??????? str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
????? return str.join("&")
??? };
? }
? //config.header['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
? return config;}, function (error) {
? // Do something with request error
? // Vue.$vux.loading.hide()
? return Promise.reject(error);});
Axios.interceptors.response.use(
? response => {
??? // Vue.$vux.loading.hide();
??? return response.data;
? },
? error => {
??? // Vue.$vux.loading.hide();
??? if (error.response) {
????? switch (error.response.status) {
??????? case 404:
????????? Message({
??????????? message: '' || 'Error',
??????????? type: 'error',
??????????? duration: 5 * 1000
????????? })
????????? break;
??????? default:
????????? Message({
??????????? message: '' || 'Error',
??????????? type: 'error',
??????????? duration: 5 * 1000
????????? })
????? }
??? } else if (error instanceof Error) {
????? console.error(error);
??? } else {
????? Message({
??????? message: '' || 'Error',
??????? type: 'error',
??????? duration: 5 * 1000
????? })
??? }
??? return Promise.reject(error.response);
? });
export default Vue.prototype.$http = Axios;
配置axios代理：
vue.config.js ↓
'use strict'const path = require('path')const defaultSettings = require('./src/settings.js')
function resolve(dir) {
? return path.join(__dirname, dir)}
const name = defaultSettings.title || 'vue Admin Template' // page title
// If your port is set to 80,// use administrator privileges to execute the command line.// For example, Mac: sudo npm run// You can change the port by the following methods:// port = 9528 npm run dev OR npm run dev --port = 9528const port = process.env.port || process.env.npm_config_port || 9528 // dev port
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
? /**
?? * You will need to set publicPath if you plan to deploy your site under a sub path,
?? * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
?? * then publicPath should be set to "/bar/".
?? * In most cases please use '/' !!!
?? * Detail: https://cli.vuejs.org/config/#publicpath
?? */
? publicPath: '/',
? outputDir: 'dist',
? assetsDir: 'static',
? lintOnSave: process.env.NODE_ENV === 'development',
? productionSourceMap: false,
? devServer: {
??? port: port,
??? open: true,
??? overlay: {
????? warnings: false,
????? errors: true
??? },
??? proxy: {
????? // change xxx-api/login => mock/login
????? // detail: https://cli.vuejs.org/config/#devserver-proxy
????? [process.env.VUE_APP_BASE_API]: {
??????? target: `http://127.0.0.1:${port}/mock`,
??????? changeOrigin: true,
??????? pathRewrite: {
????????? ['^' + process.env.VUE_APP_BASE_API]: ''
??????? }
????? },
????? ['/api']: {
??????? target: `http://127.0.0.1:3000`,
??????? changeOrigin: true,
??????? pathRewrite: {
????????? ['^' + '/api']: ''
??????? }
????? }
??? },
??? after: require('./mock/mock-server.js')
? },
? configureWebpack: {
??? // provide the app's title in webpack's name field, so that
??? // it can be accessed in index.html to inject the correct title.
??? name: name,
??? resolve: {
????? alias: {
??????? '@': resolve('src')
????? }
??? }
? },
? chainWebpack(config) {
??? config.plugins.delete('preload') // TODO: need test
??? config.plugins.delete('prefetch') // TODO: need test
??? // set svg-sprite-loader
??? config.module
????? .rule('svg')
????? .exclude.add(resolve('src/icons'))
????? .end()
??? config.module
????? .rule('icons')
????? .test(/\.svg$/)
????? .include.add(resolve('src/icons'))
????? .end()
????? .use('svg-sprite-loader')
????? .loader('svg-sprite-loader')
????? .options({
??????? symbolId: 'icon-[name]'
????? })
????? .end()
??? // set preserveWhitespace
??? config.module
????? .rule('vue')
????? .use('vue-loader')
????? .loader('vue-loader')
????? .tap(options => {
??????? options.compilerOptions.preserveWhitespace = true
??????? returnoptions
????? })
????? .end()
??? config
??? // https://webpack.js.org/configuration/devtool/#development
????? .when(process.env.NODE_ENV === 'development',
??????? config => config.devtool('cheap-source-map')
????? )
??? config
????? .when(process.env.NODE_ENV !== 'development',
??????? config => {
????????? config
??????????? .plugin('ScriptExtHtmlWebpackPlugin')
??????????? .after('html')
??????????? .use('script-ext-html-webpack-plugin', [{
??????????? // `runtime` must same as runtimeChunk name. default is `runtime`
????????????? inline: /runtime\..*\.js$/
??????????? }])
??????????? .end()
????????? config
??????????? .optimization.splitChunks({
????????????? chunks: 'all',
????????????? cacheGroups: {
??????????????? libs: {
????????????????? name: 'chunk-libs',
????????????????? test: /[\\/]node_modules[\\/]/,
????????????????? priority: 10,
????????????????? chunks: 'initial' // only package third parties that are initially dependent
??????????????? },
??????????????? elementUI: {
????????????????? name: 'chunk-elementUI', // split elementUI into a single package
????????????????? priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
????????????????? test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
??????????????? },
??????????????? commons: {
????????????????? name: 'chunk-commons',
????????????????? test: resolve('src/components'), // can customize your rules
????????????????? minChunks: 3, //? minimum common number
????????????????? priority: 5,
????????????????? reuseExistingChunk: true
??????????????? }
????????????? }
??????????? })
????????? config.optimization.runtimeChunk('single')
??????? }
????? )
? }}
main.js中加入http
import http from './utils/http'
Vue.use(http)
index.vue修改界面如下：
<template>
? <div class="dashboard-container">
??? 歡迎
? </div></template>
<script>
? import { mapGetters } from 'vuex'
? export default {
??? name: 'Dashboard',
??? computed: {
????? ...mapGetters([
??????? 'name'
????? ])
??? },
??? mounted(){
????? this.$http.get('/api/users/add').then(res => {
??????? console.log('this.panels', res)
????? })
??? }
? }</script>
<style lang="scss" scoped>
? .dashboard {
??? &-container {
????? margin: 30px;
??? }
??? &-text {
????? font-size: 30px;
????? line-height: 46px;
??? }
? }</style>
6.全局安裝koa-generator,執(zhí)行下面命令
npm install -g koa-generator
7.構(gòu)建koa2項(xiàng)目代碼如下
koa2 projectName
構(gòu)建成功信息：
D:\project>koa2 projectName
?? create:projectName
?? create: projectName/package.json
?? create: projectName/app.js
?? create: projectName/public
?? create: projectName/public/images
?? create: projectName/routes
?? create: projectName/routes/index.js
?? create: projectName/routes/users.js
?? create: projectName/views
?? create: projectName/views/index.pug
?? create: projectName/views/layout.pug
?? create: projectName/views/error.pug
?? create: projectName/public/stylesheets
?? create: projectName/public/stylesheets/style.css
?? create: projectName/bin
?? create: projectName/bin/www
?? install dependencies:
???? > cd projectName &&npm install
?? run the app:
???? > SET DEBUG=koa* &npm start projectName
?? create: projectName/public/javascripts
D:\project>
初始化后臺(tái)項(xiàng)目插件，命令如下:
cd projectName
初始化項(xiàng)目，如果沒有安裝git會(huì)報(bào)錯(cuò).
npm install
項(xiàng)目試運(yùn)行
npm run dev
這里koa2模板提示信息做的并不好，沒有輸出測(cè)試地址，成功后出現(xiàn)如下界面代表成功了。
D:\project\projectName>npm run dev
> projectName@0.1.0 dev D:\project\projectName> nodemon bin/www
[nodemon] 1.19.4[nodemon] to restart at any time, enter `rs`[nodemon] watching dir(s): *.*[nodemon] watching extensions: js,mjs,json[nodemon] starting `node bin/www`
在瀏覽器打開地址：http://localhost:3000/出現(xiàn)koa2的歡迎界面就代表成功了。
8.安裝本地mongodb或者在mongodb官網(wǎng)新建免費(fèi)的云端服務(wù)器。
本人在這里用的mongodb免費(fèi)云端數(shù)據(jù)庫(kù)。抱歉密碼不能公開，請(qǐng)自行換成自己的密碼鏈接如下：
本人數(shù)據(jù)庫(kù)名為vikiki
dbs:?'mongodb+srv://vikiki:<需要修改>@vikiki.or9iy.mongodb.net/vikiki?retryWrites=true&w=majority'
安裝mongoose
npm install mongoose --save
在第7步建好的nodejs項(xiàng)目中根目錄創(chuàng)建db目錄作者用的webstorm,可以根據(jù)自己需要下載編輯器
代碼中連接密碼需要修改成自己的
創(chuàng)建config.js 輸入代碼：
module.exports = {
??? // dbs: 'mongodb://139.159.253.110:27017/test1'
??? dbs:?'mongodb+srv://vikiki:<需要修改>@vikiki.or9iy.mongodb.net/vikiki?retryWrites=true&w=majority'}
創(chuàng)建user.js 輸入代碼：
const mongoose = require('mongoose')const feld={
??? name: String,
??? age: Number,
??? //人物標(biāo)簽
??? labels:Number}//自動(dòng)添加更新時(shí)間創(chuàng)建時(shí)間:let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('User',personSchema)
修改根目錄app.js
const Koa = require('koa')const app = new Koa()const views = require('koa-views')const json = require('koa-json')const onerror = require('koa-onerror')const bodyparser = require('koa-bodyparser')const logger = require('koa-logger')
const index = require('./routes/index')const users = require('./routes/users')
const mongoose = require('mongoose')const dbconfig = require('./db/config')
mongoose.connect(dbconfig.dbs, {useNewUrlParser: true,useUnifiedTopology: true})const db = mongoose.connection
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
? console.log('mongoose 連接成功')});// error handleronerror(app)
// middlewares
app.use(bodyparser({
? enableTypes:['json', 'form', 'text']}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))
app.use(views(__dirname + '/views', {
? extension: 'pug'}))
// logger
app.use(async (ctx, next) => {
? const start = new Date()
? await next()
? const ms = new Date() -start
? console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)})
// routes
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())
// error-handling
app.on('error', (err, ctx) => {
? console.error('server error', err, ctx)});
module.exports =app
users.js ↓
const router = require('koa-router')()const User = require('../db/models/user')
router.prefix('/users')
router.get('/add', function (ctx, next) {
??? ctx.body = 'this is a users/bar response'})
router.get('/', function (ctx, next) {
? ctx.body = 'this is a users response!'})
router.get('/bar', function (ctx, next) {
? ctx.body = 'this is a users/bar response'})
module.exports = router
重啟項(xiàng)目關(guān)掉前面我們啟動(dòng)的服務(wù)在運(yùn)行
npm run dev
運(yùn)行成功
到這里前后端就連接通了，可以開始操作數(shù)據(jù)庫(kù)。
