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

谁借莪１个温暖的怀抱￠ 2023-03-14 13:17 13阅读 0赞

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使用简介，简单记录下，仅供参考。

[JavaScript Standard Style]: https://standardjs.com/