一个cms后台管理系统项目练习

作者:jcmp      发布时间:2021-05-16      浏览量:0
1.创建github 项目文件夹2.找一

1.创建github 项目文件夹

2.找一个风水宝地,shift+右键,在此处打开命令行窗口 git clone+粘贴复制好的https(自己有配饰秘钥就可以用ssh)。

3.用vscode 打开文件夹 npm install vue-cli -g 安装脚手架。

Vue创建一个项目

4.vue init webpack admin 初始化一个webpack 项目 名字叫做admin 5.做如下选择。

如上脚手架就搭建好了 6.新建pagas文件夹和styles文件夹,在src文件夹下面 7.删除不需要的东西,做一些更改和配置 比如开发中需要改端口号和自动打开浏览器是在config---index.js里面 端口:config---index.js---port:端口号 自动打开浏览器:config---index.js---autoOpenBrowser: true, 代理解决跨域:config---index.js--- proxyTable: {}(这个参数需要查)。

删除不需要的组件

前期准备工作已经做好,接下来可以开始写页面了

1.登录页面---首页 写好登录组件:element UI 配置路由:在router--index.js 下面先导入组件,再配置路由:见下面代码块。

//导入组件import login from "@/pages/login/login"export default new Router({ routes: [{ path: "/login", component: login } ]})。

main.js里面 vue.config.productiontip = false 阻止启动生产消息,常用作指令 项目上线进入发布阶段(打包之后)项目中所有的打印提示都不会再打印台出现(打印提示不包含自己写的clg)。

集成elemen UI 导入css vue.use(elementui)保证其他组件都能使用。

拷贝登录的代码

安装sass

npm install -g cnpm //网络不稳定可以先下载cnpmcnpm install node-sass --save-devcnpm install sass-loader --save-dev1、npm install node-sass --save-dev2、npm install sass-loader --save-dev。

{ parser: "babylon" } //换成 { parser: "babel" } ( https://segmentfault.com/q/1010000018047642 )。

缺失的图片也拷贝过来 最好用cnpm 下载,一般npm很慢 后台管理系统的接口:接口文档。

集成axios

在src下面新建一个api接口文件夹新建index.js 项目中所有的额请求接口都应该定义在这个文件中,其他组件中需要用到某个请求时只导入自己需要 安装axios 导入axios。

import axios from "axios"function fetch_login(params){return axios.post("http:www.lovegf.cn:8888/api/private/v1/login",params)}

export 暴露每一个 接收的时候需要用花括号来接收 和 export default 一般一个文件夹就一个,接受的时候直接写变量名。

import 按需导入,用到哪一个就 导入哪一个

写一个方法:声明一个对象,把uasrname和password的数据放在里面 调用接口函数,把参数传进去.如果成功之后跳转页面到首页。

首页嵌套子路由(要注意,以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径)。

npm 报错 可以删除node 包再重新安装

webpack+vue 在使用element-ui时import 'element-ui/lib/theme-chalk/index.css‘失败。

1.确认style-loader!css-loader是否下载,如果下载,是否在config文件中进行了配置。

配置文件如下:

{ test: /\.css$/, loader: 'style-loader!css-loader', exclude: /node_modules/ 不包含:/node_modules/ }