前端项目开发流程（附思维导图PC）

详细的前端项目开发流程及经验，便于清晰了解

Miraitowa_chole

8693人浏览 · 2022-02-08 17:22:03

Miraitowa_chole · 2022-02-08 17:22:03 发布

一.安装node.js及cli脚手架
第一次使用新电脑都需要安装node.js

打开node下载页面
选择window安装包---64bit
然后像普通软件一样一直下一步就OK了，校验node是否完成安装, 通过 win + R 输入cmd 按回车打开命令行, 看到版本号表示安装成功
npm配置一下淘宝镜像: npm config set registry https://registry.npm.taobao.org
执行vue-cli 安装命令:npm install -g vue-cli
在命令行窗口输入vue查看vue是否安装成功,如果没有报错，说明安装成功
如果报错就执行：set-ExecutionPolicy RemoteSigned，再输入Y,然后回车即可

二.新建项目

在电脑盘（例如D盘）里面，新建一个文件夹（自己命名文件夹名）
按住shift，右键打开window powershell
输入 vue init webpack vuevue(即系自定义的那个文件名)
输入 cd vuevue(自定义的文件名)
用vscode打开这个项目
输入 npm install （如果安装失败，就改成cnpm install）
输入 npm run dev （如果失败，就改成cnpm run dev）,看到以下提示语“ Your application is running here: http://localhost:8080”就说明创建成功了

三.git创建新项目

在gitee或者gitlad里面新建一个仓库，复制链接（HTTPS)
在你的本机电脑里，创建一个自定义文件夹（例如在d盘）
然后将我们之前创建的vue项目的文件夹，拷贝到“（仓库文件夹名）”里面
右键打开“Git Bach Here”,输入git clone ，右键点击“Paste”
git add . 将所有的文件存到暂存区里
git commit -m [message]，提交暂存区到本地仓库中，[message] 可以是一些备注信息
git push 将暂存区的文件全部上传到远程仓库里
第五步到第七步也可以简化，可以直接在vscode里面提交代码

四.项目基本配置（安装）
4.1安装element

   npm i element-ui -S

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

报错情况：“dependencies were not found: * element-ui in ./src/main.js * element-ui/lib/theme-chalk/inde”
解决办法：打开项目的文件夹（例如d盘）按住shit+右键，打开window powershell 输入 cnpm i element-ui -S(没有装淘宝镜像的使用 npm i element-ui -S)

4.2 响应式rem,且适配等比例缩放

在项目根目录下中找到src文件夹，在src文件下中找到assets文件夹，在assets文件夹下新建一个js文件夹，在js文件新建一个rem.js,在rem.js中加入以下代码：


(function (draftWidth, n) {
    function getRem() {
       var html = document.querySelector("html");
       var w = document.body.clientWidth || 
       document.documentElement.clientWidth;
       var rem = (w / draftWidth) * n;
       //  html.style.fontSize = rem  + "px";
       //982:平板尺寸
       //适配pc端自适应缩放
       if (w > 982) {
              html.style.fontSize = 85 + "px";
           } else {
             html.style.fontSize = rem + "px";
          }
       }
       getRem();
      window.addEventListener("resize", function () {
           getRem();
        });
       })(1920, 100);

在项目根目录下找到main.js，在main.js中引入rem.js

import '@/assets/je/rem.js'

在页面的<style></style>里面进行使用转换》》 1px = .1rem （100转换）
（设计图 1px=.1rem/1920px = 19.2rem）

4.3 引入lang="scss"

删除node_modules文件夹（要在外部控制器删除，最好将项目关闭）
修改package.json，加入：

"dependencies": {
   "node-sass": "^4.13.1",
    "sass-loader": "^7.3.1",
 },

输入命令：

cnpm install

4.4 安装axios

输入命令：

 npm install axios

在main.js中引入或者在封装的js里引入：

import Axios from 'axios'
Vue.prototype.$axios=Axios

五.工具
Vscode

5.1安装（根据相应的版本）

一步一步安装操作
注意点：

1、通过code 打开

“操作添加到windows资源管理器文件上下文菜单：把这个两个勾选上，

可以对文件使用鼠标右键，选择VSCode 打开。

2、将code注册为受支持的文件类型的编辑器：不建议勾选，

这样会默认使用VSCode打开支持的相关文件，文件图标也会改变。

3、添加到PATH（重启后生效）：建议勾选，这样可以使用控制台打开VSCode 了。

5.2 去掉eslint
找到目录里面的》》.eslintrc.js 这个文件，将里面的内容去掉，替换成以下代码：

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "plugin:vue/essential",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
        "generator-star-spacing": "off",
        "no-tabs":"off",
        "no-unused-vars":"off",
        "no-console":"off",
        "no-irregular-whitespace":"off",
        "no-debugger": "off"
    }
};

5.3配置中文界面
插件市场搜索Chinese，点击install，然后Restart，最后重启后就ok了

5.4效率神器

5.5 安装插件

JavaScript (ES6) code snippets
Auto Close Tag 自动闭合HTML/XML标签
vscode weapp api
wxml
Winter is Coming Theme
wechat-snippet
Vuter
vue
vscode-wechat
vscode wxml
vscode weapp api
Vetur
Preview on Web Server
Pink-Cat-Boo Theme
open in browser
Live Server
JavaScript (ES6) code snippets
HTML Snippets
HTML CSS Support
Easy WXLESS
Easy LESS
css-auto-prefix
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
Auto Rename Tag
Auto Close Tag
会了吧
Path Autocomplete
GitLens----- Git Supercharged(必备)：查看git文件提交历史
Document This：注释文档生成
HTML CSS Support：在编写样式表的时候，自动补全功能大大缩减了编写时间
JavaScript Snippet Pack：针对js的插件，包含了js的常用语法关键字，很实用。
Git History Diff
待补充

六.语法
vue教程可看

在csdn写过的历史文章https://blog.csdn.net/ZHENGCHUNJUN
菜鸟教程官网https://www.runoob.com/csdn收藏的历史文章https://i.csdn.net/#/user-center/collection-list?type=1&spm=1001.2101.3001.4506七.目录
build
1 ）build.js ==> 生产环境构建脚本
2）check-versions.js ==> 检查npm，node.js版本；
3）utils.js ==> 构建相关工具方法；
4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
5）webpack.base.conf.js ==> webpack基本配置；
6）webpack.dev.conf.js ==> webpack开发环境配置；
7）webpack.prod.conf.js ==> webpack生产环境配置；
config
项目配置
node_modules
npm 加载的项目依赖模块（就是我们npm install安装的依赖）
src
1）assets：资源目录，放置一些图片或者公共js、公共css,api，这里的资源会被webpack构建；
2）components：组件目录，我们写的组件就放在这个目录里面；（可复用）
一般在components这个目录下面新建一个page，专门用来存放页面
3）router：前端路由，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；
5）main.js：入口js文件；
   static
   静态资源目录，如图片、字体等。不会被webpack构建
   index.html
   首页入口文件，可以添加一些 meta 信息等，可以在里面修改网站的名<title></tittle>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>楚君君的网站</title>
   package.json
     npm包配置文件，定义了项目的npm脚本，依赖包等信息
   README.md
     项目的说明文档，markdown 格式
   知识点延伸：
       路由的路径模式（mode hash 和 history的区别）

八.内部配置
   引入公用css
       在目录src的assets里面新建style目录，将normalize.css（该文件里面是一些必备的公用css）这个文件加入
       在目录router下的index.js里面进行引入
       一般会出现报错，这个时候只需要根据要求进行安装依赖就可以了
   重要配置！在src目录里面新建一个utils文件夹，进行存放这些配置）
       utils
           auth.js
               主要放置token（获取、缓存、删除）
           errorCode.js
               一些错误信息
           ruoyi.js
               主要是一些通用js方法封装处理
           request.js
               重要的文件！环境（测试、生产）、响应拦截器、axios

九.数据接口
   在目录src里面，进行添加xx.js文件（主要用来存放接口方法，最好根据页面来进行存放，文件名可以与所要接的页面文件名一样）
   在xx.js文件里面，引入 import request from '@/utils/request' （由于是经过二次封装，所以axios是在request.js里面进行创建，所以只需要引入request.js这个文件即可）
   接着，在xx.js文件里面，进行写接口方法（注意要写注释，每一个接口都需要写，方便辨别）
   示例如下：//一审报名接口
export function FirstInspect(data) {
return request({
url:'/appply/firstReview',
method:'post',
data: data
})
}
参数解释如下：
FirstInspect：方法名
url:接口地址
method：get/post/put
data（form-data）:具体根据该接口需要传什么参数

//修改（重新编辑）报名数据
export function EditInfor(id) {
return request({
url:'/applymatchbasicinformation/'+id,
method:'get'
})
}
   在需要调用接口方法的页面里，进行引入：
   <script>
import { FirstInspect } from "@/api/firstCheck.js" （路径）
export default {
components: { },
data () {
return
   最后，调用该方法（method）
//一审报名(提交)
submitForm() {
FirstInspect(this.form).then(res=>{
})
this.dialogVisible = true;
}
}

十.登录状态

微信扫码登录
通过后端接口获取扫码地址
用户点击按钮，跳转到微信登录扫码页面
手机授权登录成功后，跳回指定的域名，把code和state，附加在url地址上
前端调用获取token的接口,向后端发起获取token

//一进入页面就需要准备好我们需要跳转的的地址，
//即系通过后端的接口去获取扫码的地址，就是要在created(){}里面进行配置
//当我们扫码登录以后，我们会跳回指定的页面，
//这个时候就把code和state通过附加在url上携带过来，所以这个时候也需要在页面的初始化created(){}里面进行调用
//当我们拿到code和state以后，我们就需要请求后端获取token的接口，这样就可以获取到token了
//最后通过settoken（），将token进行缓存处理

十一.页面排版
   APP.vue
       一般分为三部分：头部、尾部（基本固定的）、中间部分的路由跳转

 <template>
    <div id="app">
        <header></header>
        <router-view/>
        <footer></footer>
    </div>
</template>
<script>
import Footer from './components/footer.vue'
import header from './components/header.vue'

export default {
    components: { header, Footer },
    name: 'App'
}
</script>

中间路由的部分，通过在router---index.js里面进行配置
router---index.js
示例如下：引入页面的组件，设置跳转
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/pages/home/index'
import enlist from '@/pages/enlist/enlist'
import history from '@/pages/enlist/history'
import drafts from '@/pages/enlist/drafts'
import second from '@/pages/enlist/second'

// 重置样式
import '@/assets/styles/normalize.css'

Vue.use(Router)

export default new Router({
mode:'history',
routes: [
{
path: '/',
name: 'home',
component: index,
},
{
path: '/enlist',
name: 'enlist', //报名
component: enlist
},
{
path: '/history',
name: 'history', //提交记录
component: history
},
{
path: '/drafts',
name: 'drafts', //草稿箱
component: drafts
},
{
path: '/second',
name: 'second', //二审填写资料
component: second
},
]
})
详细完整的flex弹性布局https://blog.csdn.net/weixin_42878211/article/details/107947175?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164085548816780269820413%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=164085548816780269820413&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-107947175.first_rank_v2_pc_rank_v29&utm_term=%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80&spm=1018.2226.3001.4187 #前端# 万字总结！前端项目化超详细方法及思路！https://blog.csdn.net/ZHENGCHUNJUN/article/details/117253722
表单验证
使用element的表单组件即可