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/
}
网友评论