vue后台管理系统搭建

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

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

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

1. npm i nrm -g
2. nrm ls
3. nrm use taobao||cnpm
4. cnpm i nodemon -g
5. 检测 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

1. npm i element-ui -Snpm 安装

2. 在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)

初始化项目

1. npm i node-sass sass-loader -D下载scss依赖包
2. 在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’;

login.html 模板三部曲：template+script+styles

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;    100%;   height: 100%;  
> background-color: #2f4050;
> 
>   .container {
>     position: absolute;
>     left: 0;
>     right: 0;
>      400px;
>     padding: 0px 40px 15px 40px;
>     margin: 200px auto;
>     background: white;
>     .avatar {
>       position: relative;
>       left: 50%;
>        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 {
>        100%;
>     }   } }