开源项目学习-V部落.pdf

开源项 ⽬学习-V部落 开源项 ⽬-V部落 ⼀、前期⼯作(此处只是展⽰如何开启前后端⼯程) ： 1. IDEA创建Springboot⼯程 ⼯程名 ：v-springboot 2. VSCode创建Vue-cli3⼯程 1) node.j s安装 2) 安装vue-cli3脚⼿架 npm install -g @vue/cli 3) 安装vue-cli服务 npm install -g @vue/cli-service-global 4) 创建v-vue⼯程 vue create my-proj ect 若出现错误 ：管理员运⾏powershell并设置set-ExecutionPolicy RemoteSigned为true ⼆、登录模块 1. 前端⼯作流程 启动前端和后端，前端初始化地址 ： http://localhost :8080/ ⾸先看前端的路由地址，位于router(对⽤的插件--vue-router)下的index.j s ： { path: /, name: 登录, hidden: true, component : Login } 前端是如何先到登录的这个路由的呢？如下图： 1) 前端命令 npm run dev 对应的脚本命令 dev: we pack-dev-server --inline --progress --config uild/we pack.dev.conf.js, 因此对应的基本配置为 ： uild/we pack.dev.conf.js 看此具体配置 use strict const utils = require(./utils) const we pack = require(we pack) const config = require(../config) const merge = require(we pack-merge) // 合并配置的 // dev和pro通⽤的配置 // 1. entry : ⼊⼝，此处指定了这个程序的启动⼊⼝：./src/main.js // 2. output : 出⼝，根路径下的index.js // 3. resolve: 配置 We pack 如何寻找模块所对应的⽂件，⽂件拓展后缀 // 4. module: 模块系统，rules ：⼀些资源匹配的必要规则 const aseWe packConfig = require(./we pack. ase.conf) const HtmlWe packPlugin = require(html-we pack-plugin) const FriendlyErrorsPlugin = require(friendly-errors-we pack-plugin) const portfinder = require(portfinder) // 根据 process.env.HOST 的值判断当前是什么环境 // 命令 ：npm run uild -- test ，process.env.HOST就设置为 ：test const HOST = process.env.HOST // 端⼝号 const PORT = process.env.PORT Num er(process.env.PORT) // 开发环境的基本配置 const devWe packConfig = merge( aseWe packConfig, { module: { // 新增的css匹配规则 rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) }, // cheap-module-eval-source-map is faster for development // 跨域的⼀些配置 devtool: config.d