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

1.创建github 项目文件夹

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

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

Vue创建一个项目

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

? Project description 这是一个比较综合的vue项目
? Author yuanyue <705276946@qq.com>
? Vue build (Use arrow keys)
? Vue build
? Vue build? Vue build standalone? Install vue-router? Yes? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

vue-cli · Generated "admin" 

如上脚手架就搭建好了
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 //网络不稳定可以先下载cnpm

cnpm install node-sass --save-dev

cnpm install sass-loader --save-dev

1、npm install node-sass --save-dev
2、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 包再重新安装

微信截图_20190305220413.png

(https://www.imooc.com/article/72869)

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/ 
      }