小白vue学习总结,阅者酌情参考,欢迎指正
一.安装环境
- 安装nodejs:
查看版本 node -v - 加载vue组件:
npm install vue - 搭建vue的开发环境 ,安装vue的脚手架工具 官方命令行工具:
npm install --global vue-cli - 创建项目:必须cd到对应的一个目录中
vue-init webpack vuedemo1 //webpack-simple
cd vuedemo1
npm install //如果init没错的话就不用install组件了
npm run dev - 引入组件:
npm install --save element-ui - 然后就可以愉快的CV啦
二.开发过程简介(个人习惯)
- 克隆模板:这里使用的后台管理系统的模板来自git的以为大神,远程感谢
后台管理系统模板
克隆到本地后,进入项目路径下执行以下命令,加载组件
npm install
然后就可以运行啦
npm run dev
另附此大神的模板使用指南一份 - 目录结构
├── build # 构建相关 ├── mock # 项目mock 模拟数据 ├── plop-templates # 基本模板 ├── public # 静态资源 │ │── favicon.ico # favicon图标 │ └── index.html # html模板 ├── src # 源代码 │ ├── api # 所有请求 │ ├── assets # 主题 字体等静态资源 │ ├── components # 全局公用组件 │ ├── directive # 全局指令 │ ├── filters # 全局 filter │ ├── icons # 项目所有 svg icons │ ├── lang # 国际化 language │ ├── layout # 全局 layout │ ├── router # 路由 │ ├── store # 全局 store管理 │ ├── styles # 全局样式 │ ├── utils # 全局公用方法 │ ├── vendor # 公用vendor │ ├── views # views 所有页面 │ ├── App.vue # 入口页面 │ ├── main.js # 入口文件 加载组件 初始化等 │ └── permission.js # 权限管理 ├── tests # 测试 ├── .env.xxx # 环境变量配置 ├── .eslintrc.js # eslint 配置项 ├── .babelrc # babel-loader 配置 ├── .travis.yml # 自动化CI配置 ├── vue.config.js # vue-cli 配置 ├── postcss.config.js # postcss 配置 └── package.json # package.json
- 开始着手改啦
1)src/router修改路由,改为自己的菜单
2)在src/view下新建自己的页面文件,地址注意与router中import引入的文件名一致
3)请求:src/api下建相应的文件
4)模拟数据:mock下建相应的文件,注意在mock/index.js中引入一下
5)另ElementUI参考:https://element.eleme.cn/#/zh-CN/component/tree
三.前端在线预览
- 打包:
npm run build:prod
噢,打包前要先将路径修改为相对路径:vue.config.js中
publicPath: ‘/’,改为 publicPath: ‘./’, - 将dist文件中的打包文件上传至git,然后设置setting
可参考这位大神
至此,前端完事儿啦
作为一个苦逼的后台被抓来写前台很是头大,所以呢接下来会重点写一下接口,据说将来发布还牵扯到跨域问题,持续头大中…