本文详细介绍了VueCLI的安装、项目构建、配置定制，包括通过命令行安装、使用axios、搭建Postman Mock Server解决跨域问题，以及前后端项目的部署发布，特别是涉及ESModule的打包策略。
一、Vue-cli
基本概念
Vue cli是基于Vue的应用开发提供的一个标准的脚手架工具.为应用搭建基础的框架结构,提供插件、开发服务、Preset、构建打包功能Vue cli 背后集成了现代化开发的诸多功能,通过简单的命令就可以完成 "零配置"的项目环境搭建安装Vue-cli步骤
1. 安装Node.js下载地址：https://nodejs.org/en/download/ node -v 显示当前node版本查看是否安装成功2. 安装NPM(Node Package Manager，node包管理和分发的工具)，其实安装了node后默认自动集成npm工具。npm -v 查看当前npm版本npm config ls 查看包管理路径 2.1设置包管理路径 创建一个目录，如 E:\package\nodejs 在 E:\package\nodejs下再创建 npm_modules文件夹 和 npm_cache文件夹(这两个文件名一定要写对) 执行下边的命令,设置为自定义的包管理路径： npm config set prefix "E:\package\nodejs\npm_modules" npm config set cache "E:\package\nodejs\npm_cache" 2.2NPM环境变量配置 npm config get prefix 查看npm的全局路径添加新的系统变量: key=NODE_HOME , value= 查看npm的全局路径path中添加 path中添加 %NODE_HOME%\npm_modules 3.安装cnpm(以管理员身份打开命令行)npm install -g cnpm --registry=https://registry.npm.taobao.org 安装cnpm -v 查看cnpm的版本 4.安装vue-clinpm install -g @vue/cli 安装命令vue -V 查看版本快速构建Vue项目
1. 桌面创建一个空的文件夹，如： vueTest2. 以管理员身份运行cmd , 进入到vueTest文件夹3. 执行下面的命令： vue create 项目名称，如：vue create my-project(文件名 不支持驼峰(含大写字母)使用短横线方式)4. 选择自定义安装,点击回车(Manually)5. 在这列表中,选择我们要安装的组件,使用空格键选择,选好后回车(选择Babel、Router路由)6. 按回车之后,提示选择什么模式的路由,我们输入 n (表示选择hash模式)7. 选择项目配置文件单独存放(In dedicated condif files)8. 是否保存模板,选择n 不创建9. 安装完成,提示输入执行下面这两个命令cd my-project 进入项目目录 npm run serve 启动项目10.访问项目: http://localhost:8080/ 11.停止项目 只要关闭命令行窗口就可以项目结构介绍
|--- my-project 项目名称 |--- node_modules 存放依赖包的目录 |--- public 静态资源管理目录 |--- src 组件源码目录(我们写的代码) |--- assets 存放静态图片资源(CSS也可以放在这里) |--- components 存放各种组件(一个页面可以看做一个组件)，各个组件联系在一起组成一个完整的项目 |--- router 存放了项目路由文件 |--- views 放置的为公共组件(主要还是各个主要页面) |--- App.vue app.vue可以当做是网站首页，是一个vue项目的主组件，页面入口文件 |--- main.js 打包运行的入口文件，引入了vue模块和app.vue组件以及路由route |--- babel.config.js babel配置文件, 对源代码进行转码(把es6=>es5) |--- package.json 项目及工具的依赖配置文件 |--- paxkage-lock.json 依赖配置文件 |--- README.md 项目说明Vue脚手架自定义配置
//package.json{ //1.项目基本信息 "name": "project3", "version": "0.1.0", "private": true, //2.指定运行脚本命令 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, //4.生产环境所依赖模块的版本 "dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11", "vue-router": "^3.2.0" }, //5.本地环境开发所依赖的版本 "devDependencies": { "@vue/cli-plugin-babel": "~4.4.0", "@vue/cli-plugin-router": "~4.4.0", "@vue/cli-service": "~4.4.0", "vue-template-compiler": "^2.6.11" } //自定义配置,不推荐这种方式 //因为package.json 主要是用来管理包的配置信息 //为了方便维护,我们将Vue脚手架相关的配置单独定义到 vue.config.js 配置文件中 " vue":{ "devServer":{ "port":"8888", //访问端口 "open":true //打包完成自动打开浏览器 } }}//在项目的根目录创建文件 vue.config.jsmodule.exports = { devServer:{ open:true port:8889 }}命令行方式安装
1. 创建 一个新的项目 2. 当前项目下打开终端, 安装依赖包 ,执行下面的命令 npm i element-ui -S 3. 打开 main.js , 导入Element-UI 相关资源//导入组件库import ElementUI from 'element-ui'//导入组件相关样式import 'element-ui/lib/theme-chalk/index.css'//配置Vue插件 将El安装到Vue上Vue.use(ElementUI);安装axios
1. npm安装：使用npm下载axios包npm i axios2. 在main.js文件中导入axios 相关资源//引入axiosimport axios from 'axios'//Vue对象使用axiosVue.prototype.axios = axios;Postman搭建mock server
Mock server就是模拟一个服务器，我们使用Mock server可以模拟后台接口,对请求进行响应在前后端分离的开发中 前端利用mockeserver模拟出对应接口，拿到返回数据来调试，无需等后端开发人员完成工作。1. 使用postman模拟出一个server(New==>Mock Server)2. 打开如下窗体，创建一个伪服务跨域问题解决
当我们在前端项目中,向后端发送请求的获取课程数据的时候,出现了跨域问题:已被CORS策略阻止：请求的资源上没有' Access-Control-Allow-Origin'标头(跨域请求失败)跨域是指通过JS在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，只要 协议、域名、端口 有任何一个不同，都被当作是不同的域,浏览器就不允许跨域请求.
<dependency> <groupId>com.thetransactioncompanygroupId> <artifactId>cors-filterartifactId> <version>2.5version>dependency> <filter> <filter-name>corsFilterfilter-name> <filter-class>com.thetransactioncompany.cors.CORSFilterfilter-class> filter> <filter-mapping> <filter-name>corsFilterfilter-name> <url-pattern>/*url-pattern> filter-mapping>项目的发布部署
项目立项需求分析阶段原型图设计阶段开发阶段测试阶段系统上线后台项目部署
安装虚拟机：Linux操作系统 CentOS 7 版本 安装软件环境：JDK11、Tomcat 8.5、MySQL 5.7//查看Java版本java -version# 进入到tomcat目录cd /usr/tomcat/# 启动tomcat./bin/startup.sh# 关闭tomcat./bin/shutdown.sh#查看已经开放的端口：firewall-cmd --list-ports#开启端口firewall-cmd --zone=public --add-port=8080/tcp --permanent#命令含义：–zone #作用域–add-port=8080/tcp #添加端口，格式为：端口/通讯协议–permanent #永久生效，没有此参数重启后失效#重启防火墙firewall-cmd --reload #重启firewall#关闭防火墙systemctl stop firewalld.service #停止firewallsystemctl disable firewalld.service #禁止firewall开机启动firewall-cmd --state #查看默认防火墙状态(关闭后显示notrunning，开启后显示running)-- 创建用户CREATE USER 'JiuYuan'@'%' IDENTIFIED BY 'JiuYuan@123';-- 授予所有权限GRANT ALL PRIVILEGES ON *.* TO 'JiuYuan'@'%' IDENTIFIED BY 'JiuYuan@123';-- 刷新FLUSH PRIVILEGES;//生产环境地址public static final String LOCAL_URL = "http://192.168.52.100:8080";<packaging>warpackaging><properties> <project.build.sourceEncoding>UTF-8project.build.sourceEncoding> <maven.compiler.source>11maven.compiler.source> <maven.compiler.target>11maven.compiler.target>properties>前端项目部署
修改配置文件:前端项目的配置文件有两个,一个是开发环境的配置文件(.env.development),一个是生产环境的配置文件(.env.production).env.development 文件VUE_APP_API_BASE = http://192.168.52.100:8080/lagou_edu_home//.env.productionVUE_APP_API_BASE = http://192.168.52.100:8080/lagou_edu_homemodule.exports = { // relative path for dev publicPath: process.env.NODE_ENV === "production" ? "/edu-boss/" : "./", // for gh-pages indexPath: "index.html", assetsDir: "static", lintOnSave: process.env.NODE_ENV !== "production", productionSourceMap: false, css: { // sourceMap: process.env.NODE_ENV !== 'production' }, devServer: { open: true, port: 8081 }};
扫一扫
2867
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
