vue后台管理系统搭建

软件架构
软件架构说明：本项目使用vue框架，写的一个后台管理系统

使用说明
**项目开始之前,**先安装npm 将taobao作为镜像文件,切换到到cnpm,步骤如下:

前提 node.js中已经包含了npm，需要检测npm安装好了没有
0. npm -v
0.1 npm install npm -g 升级npm

npm i nrm -g

nrm ls

nrm use taobao||cnpm

cnpm i nodemon -g

检测 nodemon -v

如果没有cnpm 安装npm i cnpm -g 安装了nodemon 启动文件的方式:nodemon index.js

项目开始预备
vue-cli脚手架工具

vue-cli是官方的一个脚手架工具，所谓脚手架就是一个架子，项目结构的架子，它里面包含一些最基本的脚本结构设置。利用vue-cli，我们可以生成这样的一个脚手架，所以就被成为脚手架工具。

npm install vue-cli -g 下载全局脚手架

vue init webpack vue_admin 使用脚手架初始化webpack项目

注意在初始化过程中，除了vue-router输入y之外其余的一律是n

cd vue_admin进入初始化项目

npm run dev运行vue项目

不能自动打开浏览器的解决方法如下:

进入vue_admin/config/index.js文件，修改dev中的autoOpenBrowser:
true即可,下次在启动就可以自动在浏览器中打开了也可以手动复制链接在浏览器中打开：

手动在浏览器中输入网址http://localhost:8080/#/

npm run
build打包命令文件默认在vue_admin/dist目录，默认只能复制dist目录的文件到服务器中运行,不能双击以file形式打开，解决方式如下:

进入vue_admin/config/index.js文件，修改build中的assetsPublicPath路径./`

// assetsPublicPath: '/', // 默认
assetsPublicPath: './',   // 修改为

element-ui
http://element-cn.eleme.io/#/zh-CN/component/installation

npm i element-ui -Snpm 安装
在main.js配置使用

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'

Vue.use(ElementUI)

初始化项目

npm i node-sass sass-loader -D下载scss依赖包
在main.js中引入index.scss

import '@/styles/index.scss'

less-loader处理less文件

解析处理文件后缀名为.less的文件

> // 1. 安装less less-loader npm i less less-loader --save-dev
> 
> // 2. 在webpack.config.js中的moudle节点中配置解析规则 module:{
>     rules:[
>         {
>             test:/\.less$/,
>             use:['style-loader','css-loader','less-loader']
>         }
>     ] }

项目start
登录页面
在index.less中引入字体文件@import ‘./icon.less’;

template

> <div class="login">   <el-form ref="form" :model="form"
> class="container" :rules="rules">
>     <el-form-item>
>       <div class="avatar">
>         <img src="../assets/avatar.jpg" alt="">
>       </div>
>     </el-form-item>
>     <el-form-item prop="username">
>       <el-input v-model="form.username" placeholder="账户" prefix-icon="myicon myicon-user"></el-input>
>     </el-form-item>
>     <el-form-item prop="password">
>       <el-input v-model="form.password" placeholder="密码" prefix-icon="myicon myicon-key"></el-input>
>     </el-form-item>
>     <el-form-item>
>       <el-button type="primary" class="login-btn">登录</el-button>
>     </el-form-item>   </el-form> </div>

script

> data () {   return {
>     form: {
>       username: '',
>       password: ''
>     }   } }

css样式

> .login {   position: fixed;   width: 100%;   height: 100%;  
> background-color: #2f4050;
> 
>   .container {
>     position: absolute;
>     left: 0;
>     right: 0;
>     width: 400px;
>     padding: 0px 40px 15px 40px;
>     margin: 200px auto;
>     background: white;
>     .avatar {
>       position: relative;
>       left: 50%;
>       width: 120px;
>       height: 120px;
>       margin-left: -60px;
>       margin-top: -60px;
>       box-sizing: border-box;
>       border-radius: 50%;
>       border: 10px solid #fff;
>       box-shadow: 0 1px 5px #ccc;
>       overflow: hidden;
>     }
>     .login-btn {
>       width: 100%;
>     }   } }

vue后台管理系统搭建

猜你喜欢