vue后台管理系统搭建

你的名字 2022-03-17 02:40 380阅读 0赞

软件架构  
软件架构说明：本项目使用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][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’;

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%;
    >     }   } }

[http_element-cn.eleme.io_zh-CN_component_installation]: http://element-cn.eleme.io/#/zh-CN/component/installation