Vue项目初始化搭建（个人毕设项目前端搭建流程）

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 代码风格，以下是一些基本规范细则。

1. 使用两个空格 – 进行缩进
2. 字符串使用单引号 – 需要转义的地方除外
3. 不再有冗余的变量 – 这是导致 大量 bug 的源头!
4. 无分号–没什么不好，不骗你！
5. 行首不要以–(, [, or ```开头
   • 这是省略分号时唯一会造成问题的地方 – 工具里已加了自动检测！
6. 关键字后加空格 if (condition) { ... }
7. 函数名后加空格 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使用简介，简单记录下，仅供参考。