1、基于Vue初始化项目
vue init webpack hr
以开发模式运行
cd hr
npm run dev
2、设置启动后自动打开浏览器
修改package.json文件
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open"
3、项目规定代码风格
项目采用 JavaScript Standard Style 代码风格,以下是一些基本规范细则。
- 使用两个空格 – 进行缩进
- 字符串使用单引号 – 需要转义的地方除外
- 不再有冗余的变量 – 这是导致 大量 bug 的源头!
- 无分号–没什么不好,不骗你!
- 行首不要以–
(
,[
, or ```开头- 这是省略分号时唯一会造成问题的地方 – 工具里已加了自动检测!
- 关键字后加空格
if (condition) { ... }
- 函数名后加空格
function name (arg) { ... }
4、Git版本控制
- 创建功能性分支
- 功能分支开发完合并到master分支
- 之后删除功能性分支
//创建并切换新分支
git checkout -b dev-login
//切换到mastera分支
git checkout master
//将dev分支合并到当前分支
git merge dev
//删除dev-login分支
git branch -d dev-login
//查看所有分支
git branch
5、引入ElementUI
npm install element-ui
在main.js长加载使用
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
//安装依赖
npm install stylus-loader css-loader style-loader --save-dev
6、在Vue中使用SCSS
npm install node-sass --save-dev
npm install sass-loader --save-dev
<style lang="scss" scope>
</style>
修改package.json,将 "sass-loader": "^8.0.2",更换成了 "sass-loader": "^7.3.1",
7、引入axios插件
npm install axios
//新建utils文件夹,新建request.js
import axios from 'axios'
// 创建axios实例
const service = axios.create({
baseURL: '',
timeout: 10000 // 请求超时时间
})
export default service
//在api文件夹下新建login.js
import request from '@/utils/request'
export function login(username, password){
const data = {
username,
password,
}
return request({
url: '/login',
method: 'post',
params: data
})
}
8、总结
以上是个人毕设项目前端搭建的初始化流程以及git使用简介,简单记录下,仅供参考。