当前位置： 首页 > news >正文

入门vue——创建vue脚手架项目 以及 用tomcat和nginx分别部署vue项目（vue2）

news 2025/11/10 6:03:52

入门vue——创建vue脚手架项目 以及 用tomcat和nginx分别部署vue项目（vue2）

  • 1. 安装npm
  • 2. 安装 Vue CLI
  • 3. 创建 vue_demo1 项目（官网）
    • 3.1 创建 vue_demo1 项目
      • 3.1.1 创建项目
      • 3.1.2 解决 sudo 问题
    • 3.2 查看创建的 vue_demo1 项目
      • 3.2.1 项目结构
      • 3.2.2 项目结构简单说明
    • 3.3 运行 vue_demo1 项目
  • 4. 创建 vue_demo2 项目（入门练习）
    • 4.1 创建项目
    • 4.2 编写组件
    • 4.3 编写main.js
    • 4.4 编写index.html
    • 4.5 启动看效果
    • 4.6 附代码
      • 4.6.1 组件
      • 4.6.2 其他
  • 5. tomact 上部署脚手架vue项目
    • 51. 安装 并 启动 tomcat
    • 5.2 部署vue项目
    • 5.3 访问项目
  • 6. nginx 上部署脚手架vue项目
    • 6.1 关于nginx的安装、配置等
    • 6.2 将打包后的dist文件上传的服务器上
      • 6.2.1 上传服务器
      • 6.2.2 注意问题-403
    • 6.3 配置nginx
    • 6.4 重启nginx，访问看效果
    • 6.5 防火墙问题
  • 7. 遇到的问题
    • 7.1 组件之间样式冲突
    • 7.2 部署服务器上的页面不加载
      • 7.2.1 详细问题如下：
      • 7.2.2 问题原因 + 解决问题
  • 8. 项目下载

1. 安装npm

  • 详细参考下面的文章：
    npm常用命令 + 前端常用的包管理工具 以及 npm淘宝镜像配置等.

2. 安装 Vue CLI

  • 安装前可使用 nrm 切换到淘宝镜像，如下：
    nrm use taobao
    在这里插入图片描述
  • 安装命令：
    npm install -g @vue/cli
# OR
yarn global add @vue/clisudo npm install -g @vue/cli  #Mac
    在这里插入图片描述
  • 使用命令，查看安装版本
    vue
vue -V
    在这里插入图片描述
  • 官网地址：
    https://cli.vuejs.org/zh/.

3. 创建 vue_demo1 项目（官网）

3.1 创建 vue_demo1 项目

3.1.1 创建项目

  • 命令：
    vue create vue_demo1sudo vue create vue_demo1   # Mac的要想解决这个sudo的束缚，看下面的 3.1.2 解决 sudo 问题
    在这里插入图片描述

3.1.2 解决 sudo 问题

  • 每次必须加上 sudo 挺麻烦的，想要解决的话，根据提示解决，先看提示，如下：
    在这里插入图片描述
  • 输入提示命令解决：
    sudo chown -R 501:20 "/Users/XXX/.npm"
    在这里插入图片描述

3.2 查看创建的 vue_demo1 项目

3.2.1 项目结构

  • 如下：
    在这里插入图片描述

3.2.2 项目结构简单说明

  • main.js 文件是项目的入口
    在这里插入图片描述
  • App.vue 组件是所有组件的父组件
    在这里插入图片描述

3.3 运行 vue_demo1 项目

  • 命令如下：
    npm run servesudo npm run serve  # Mac权限问题用这个
    在这里插入图片描述
  • 访问：
    在这里插入图片描述

4. 创建 vue_demo2 项目（入门练习）

4.1 创建项目

  • 跟上面的步骤一样，再创建一个新的项目 vue_demo2 ，用于修改练习，创建过程不再介绍。

4.2 编写组件

  • 组件结构如下：
    在这里插入图片描述

4.3 编写main.js

  • 如下：
    import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({el:'#dogZool',render: h => h(App),});
    在这里插入图片描述

4.4 编写index.html

  • 如下：
    在这里插入图片描述

4.5 启动看效果

  • 打包项目

    npm run build

  • 启动命令：

    npm run serve

  • 效果：
    在这里插入图片描述

    在这里插入图片描述

4.6 附代码

4.6.1 组件

  • ZooHead.vue

    <template><div><h2 >{{zoolTitle}}</h2><nav style="float: right;"><a href="#">首页</a><a href="#">我的关注</a><a href="#">我的收藏</a><a href="#">我的</a></nav></div>
</template><script>export default{name:'ZooHead',data() {return{zoolTitle:'01-欢迎来到狗狗乐园！！'}}};
</script><!-- scoped 处理组件样式冲突 -->
<style scoped>div{height: 80px;}h2{color: green;}nav a{padding-left: 20px;}</style>

  • DogInfo.vue

    <template><div ><h2 >02-狗狗信息</h2><table><caption>狗狗信息</caption><thead><tr><th>狗狗编号</th><th>狗狗姓名</th><th>狗狗性别</th><th>狗狗年龄</th><th>狗狗种类</th><th>备注</th></tr></thead><tbody><tr v-for="dog in dogs" v-bind:key="dog.dogNum"><td>{{dog.dogNum}}</td><td>{{dog.dogName}}</td><td>{{dog.sex}}</td><td>{{dog.dogAge}}</td><td>{{dog.dogKind}}</td><td>{{dog.dogDesc}}</td></tr></tbody></table></div>
</template><script>export default{name:'DogInfo',data() {return{dogs:[{dogNum:'A1001',dogName:'麦兜',sex:'女',dogAge:3,dogKind:'边牧',dogDesc:'温柔、调皮又粘人'},{dogNum:'A1002',dogName:'贝塔',sex:'女',dogAge:3,dogKind:'边牧',dogDesc:'性格温柔'},{dogNum:'A1003',dogName:'大牙',sex:'男',dogAge:2,dogKind:'边牧',dogDesc:'活泼'},{dogNum:'A1004',dogName:'泡泡',sex:'女',dogAge:6,dogKind:'柯基',dogDesc:'性格温柔'},					{dogNum:'A1005',dogName:'乐乐',sex:'男',dogAge:1,dogKind:'柴犬',dogDesc:'调皮'},{dogNum:'A1006',dogName:'闪闪',sex:'男',dogAge:9,dogKind:'秋天',dogDesc:'高傲'},{dogNum:'A1007',dogName:'托尼',sex:'女',dogAge:3,dogKind:'边牧',dogDesc:'聪明'}	]}}};
</script><style scoped>table caption{font-size: 25px;background-color: aqua;}table{background-color: aqua;border: 1px solid;border-collapse: collapse;width: 800px;height: 300px;margin-bottom: 30px;/* border-radius: 10px; */}th,td{border: 1px solid;text-align: center;}h2{color: rebeccapurple;}</style>

  • ZooBottom.vue

    <template><div ><h2 >{{zoolMore}}</h2><footer><nav><a href="#">关于我们</a><a href="#">联系我们</a><a href="#">友情链接</a><a href="#">了解更多</a></nav></footer></div>
</template><script>export default{name:'ZooBottom',data() {return{zoolMore:'03-更多'}}};
</script><style scoped>h2{color: skyblue;}a{padding-left: 20px;}</style>

  • App.vue

    <template><div><ZooHead></ZooHead><hr><DogInfo></DogInfo><hr><ZooBottom></ZooBottom></div>
</template><script>//引入组件import ZooHead from "./components/ZooHead.vue"import DogInfo from './components/DogInfo' //.vue 可省略import ZooBottom from './components/ZooBottom'export default{name:'app',components:{ZooHead,DogInfo,ZooBottom}};</script><style>
</style>

4.6.2 其他

  • main.js

    import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({el:'#dogZool',render: h => h(App),});

  • index.html

    <!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><div id="dogZool"><App></App></div></body>
</html>

5. tomact 上部署脚手架vue项目

51. 安装 并 启动 tomcat

  • 关于 tomcat的安装等问题，自己解决一下，或者参考下面的文章：
    linux下安装tomact.

5.2 部署vue项目

  • 将 build 后的 dist 文件上传到服务器上，放到 tomcat 的 webapps 目录下，我这里又加了一层 vue_demo ，如下：
    在这里插入图片描述

5.3 访问项目

  • 直接输入，访问即可，注意端口号，我这里把tomact 的端口改成了 8089，如下：
    http://服务器IP:tomact端口/vue_demo/dist/index.html
    在这里插入图片描述

6. nginx 上部署脚手架vue项目

6.1 关于nginx的安装、配置等

  • 关于nginx的安装、配置等，可看下面的文章
    • Nginx 01篇——Nginx详细安装步骤以及Nginx各种启动方式
    • Nginx 02篇——Nginx基本配置与参数说明篇
    • Nginx 03篇——Nginx配置实例

6.2 将打包后的dist文件上传的服务器上

6.2.1 上传服务器

  • 存放目录，如下：
    cd /nginx_test/vue_project/vue_demo
    在这里插入图片描述

6.2.2 注意问题-403

  • 我这里刚开始将项目放到了 susu 用户下，如下：
    在这里插入图片描述

  • 出先的问题就是 403，如下：
    在这里插入图片描述

  • 问题原因：
    我这里是 root 用户启动的 nginx，所以这里有访问权限的问题。

  • 解决问题：
    解决办法：把 nginx 的启动用户改成目录的所属用户，重启 Nginx 即可解决，配置如下：

    user susu

    在这里插入图片描述

  • 重新访问

    • 修改完配置之后，然后 root 用户重启动 nginx，再次访问，问题已解决。

    • 当然，也可以用 susu 用户启动，root 用户安装的 nginx 也可以，如下：

      sudo ./nginx

      在这里插入图片描述

      如果因为权限问题不能启动，请参考下面这篇文章：
      linux下新建用户并给用户授权以及解决 sudo 不能使用问题.

6.3 配置nginx

  • 如下：
      server {listen 9007;server_name 服务器IP;location /dist/ {
#        root  /home/susu/vue_project/vue_demo/;root  /nginx_test/vue_project/vue_demo/;}}
    在这里插入图片描述

6.4 重启nginx，访问看效果

  • 如下：
    http://服务器IP:9007/dist/index.html
    在这里插入图片描述

6.5 防火墙问题

  • 如果拒绝访问，查看防火墙问题，可以看下面的文章：
    linux下查看防火墙状态、关闭防火墙、开放关闭端口等.

7. 遇到的问题

7.1 组件之间样式冲突

  • 解决问题：
    用 style 标签上的 scoped 属性，如下：
    在这里插入图片描述

7.2 部署服务器上的页面不加载

7.2.1 详细问题如下：

  • 本地启动：
    在这里插入图片描述
  • 服务器上：
    在这里插入图片描述

7.2.2 问题原因 + 解决问题

  • 问题原因：
    资源路径问题，服务器上路径不对，解决路径即可
  • 解决问题：
    在vue.config.js中配置 publicPath:'./' 即可，如下：
    在这里插入图片描述
  • 打包，重新部署问题解决！

8. 项目下载

  • 下载：vue脚手架项目入门demo（vue2）.

相关文章：

入门vue——创建vue脚手架项目 以及 用tomcat和nginx分别部署vue项目（vue2）

入门vue——创建vue脚手架项目 以及 用tomcat和nginx分别部署vue项目&#xff08;vue2&#xff09; 1. 安装npm2. 安装 Vue CLI3. 创建 vue_demo1 项目&#xff08;官网&#xff09;3.1 创建 vue_demo1 项目3.1.1 创建项目3.1.2 解决 sudo 问题 3.2 查看创建的 vue_demo1 项目3…...

编程日记 2023/9/1 21:30:25

oracle中的（+）

一、()为何意&#xff1f; oracle中的&#xff08;&#xff09;是一种特殊的用法&#xff0c;&#xff08;&#xff09;表示外连接&#xff0c;并且总是放在非主表的一方。 二、举例 左外连接&#xff1a; select A.a,B.a from A LEFT JOIN B ON A.bB.b; 等价于 select A.a,B.…...

编程日记 2023/9/1 21:29:23

五种永久免费 内网穿透傻瓜式使用

方法一(使用qydev) 官网&#xff1a;点击访问 1、官网 页面&#xff1a;找到客户端下载 2、找到自己电脑或者运行平台对应的版本(我的是windows 64位) 3、下载完成后解压到 自己熟悉的文件内保存&#xff0c;解压后&#xff0c;暂时不管她&#xff0c;继续第4步 4、登录官网…...

编程日记 2023/9/1 21:28:22

【Java基础增强】Stream流

1.Stream流 1.1体验Stream流【理解】 案例需求 按照下面的要求完成集合的创建和遍历 创建一个集合&#xff0c;存储多个字符串元素 把集合中所有以"张"开头的元素存储到一个新的集合 把"张"开头的集合中的长度为3的元素存储到一个新的集合 遍历上一步得…...

编程日记 2023/9/1 21:27:21

reduxreact-redux

redux redux组成部分&#xff1a;state,action,reducer,store store主要职责&#xff1a; 维持应用的state 提供getState()方法获取state 提供dispatch()方法发送action 通过subscribe()来注册监听 通过subscribe()返回值来注销监听 用法&#xff1a; action:必须要有return返…...

编程日记 2023/9/1 21:26:20

go中的并发

goruntine(协程) 每一个并发的执行单元叫做一个goruntine&#xff0c;要编写一个并发任务&#xff0c;可以在函数名前加go关键字&#xff0c;就能使这个函数以协程的方式运行&#xff0c; 如&#xff1a;go 函数名&#xff08;函数参数&#xff09;、 如果函数有返回值&…...

编程日记 2023/9/1 21:25:19

开启EMQX的SSL模式及SSL证书生成流程

生成证书 首先&#xff1a;需要安装Openssl 以下是openssl命令 生成CA证书 1.openssl genrsa -out rootCA.key 2048 2.openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 3650 -subj "/CCN/STShandong/Ljinan/Oyunding/OUplatform/CNrootCA" -out ro…...

编程日记 2023/9/1 21:24:18

4 | Java Spark实现 WordCount

简单的 Java Spark 实现 WordCount 的教程，它将教您如何使用 Apache Spark 来统计文本文件中每个单词的出现次数。 首先，确保您已经安装了 Apache Spark 并设置了运行环境。您需要准备一个包含文本内容的文本文件，以便对其进行 WordCount 分析。 代码 package com.bigdat…...

编程日记 2023/9/1 21:23:17

Redis7安装

1. 使用什么系统安装redis 由于企业里面做Redis开发&#xff0c;99%都是Linux版的运用和安装&#xff0c;几乎不会涉及到Windows版&#xff0c;上一步的讲解只是为了知识的完整性&#xff0c;Windows版不作为重点&#xff0c;同学可以下去自己玩&#xff0c;企业实战就认一个版…...

编程日记 2023/9/1 21:22:15

Nginx vs Tomcat：一个高性能Web服务器和Java应用服务器的对决

Nginx vs Tomcat&#xff1a;一个高性能Web服务器和Java应用服务器的对决 Nginx和Tomcat都是常见的Web服务器解决方案&#xff0c;但它们在设计、适用场景以及性能方面存在一些显著差异。本文将比较这两个解决方案&#xff0c;并探讨它们各自的优势。 1. 设计理念 Nginx&…...

编程日记 2023/9/1 21:21:14

终端登录github两种方式

第一种方式 添加token&#xff0c;Setting->Developer Setting 第二种方式SSH 用下面命令查看远程仓库格式 git remote -v 用下面命令更改远程仓库格式 git remote set-url origin gitgithub.com:用户名/仓库名.git 然后用下面命令生成新的SSH秘钥 ssh-keygen -t ed2…...

编程日记 2023/9/1 21:20:12

【防火墙】防火墙NAT Server的配置

Web举例&#xff1a;公网用户通过NAT Server访问内部服务器 介绍公网用户通过NAT Server访问内部服务器的配置举例。 组网需求 某公司在网络边界处部署了FW作为安全网关。为了使私网Web服务器和FTP服务器能够对外提供服务&#xff0c;需要在FW上配置NAT Server功能。除了公网…...

编程日记 2023/9/1 21:19:11

《算法竞赛·快冲300题》每日一题：“简化农场”

《算法竞赛快冲300题》将于2024年出版&#xff0c;是《算法竞赛》的辅助练习册。 所有题目放在自建的OJ New Online Judge。 用C/C、Java、Python三种语言给出代码&#xff0c;以中低档题为主&#xff0c;适合入门、进阶。 文章目录 题目描述题解C代码Java代码Python代码 “ 简…...

编程日记 2023/9/1 21:18:09

【二等奖方案】大规模金融图数据中异常风险行为模式挖掘赛题「冀科数字」解题思路

第十届CCF大数据与计算智能大赛&#xff08;2022 CCF BDCI&#xff09;已圆满结束&#xff0c;大赛官方竞赛平台DataFountain&#xff08;简称DF平台&#xff09;正在陆续释出各赛题获奖队伍的方案思路&#xff0c;欢迎广大数据科学家交流讨论。 本方案为【大规模金融图数据中…...

编程日记 2023/9/1 21:17:09

C# List与HashSet的contains()方法查询速度比较

List 和HashSet同时查询40万条数据&#xff0c;谁的效率更高&#xff1f; //**1.下面是List底层源码**public boolean contains(Object o) {//如果查到我们想要查询的值则返回一个true&#xff0c;否则返回false&#xff0c;return indexOf(o) > 0;//这里是调用了indexOf方…...

编程日记 2023/9/1 21:16:07

命令执行漏洞复现攻击：识别威胁并加强安全

环境准备 这篇文章旨在用于网络安全学习&#xff0c;请勿进行任何非法行为&#xff0c;否则后果自负。 一、攻击相关介绍 原理 主要是输入验证不严格、代码逻辑错误、应用程序或系统中缺少安全机制等。攻击者可以通过构造特定的输入向应用程序或系统注入恶意代码&#xff…...

编程日记 2023/9/1 21:15:06

Keepalived实现服务器的高可用性

目录 背景方案简介KeepalivedHeartbeat Keepalived技术介绍Keepalived通信方式时间同步 Keepalived配置案例Keepalived日志配置Keepalived服务配置全局配置段VRRP配置段Keepalived服务启动 服务异常检测 背景 在实际应用中&#xff0c;为了提高服务器的高可用性&#xff0c;往…...

编程日记 2023/9/1 21:14:05

Python程序化交易接口批量获取数据源码

小编举例下面是一个简单的示例代码&#xff0c;展示如何使用Python的程序化交易接口批量获取数据&#xff0c;例如开发文档参考&#xff1a;MetaTradeAPI (metatradeapi) - Gitee.com 签名 int Init(); 功能 API 初始化 参数 无 返回值 授权成功的交易账户数量 返回值 &…...

编程日记 2023/9/1 21:13:02

【强化学习】基本概念

基本大概框架 强化学习的主要角色是 智能体 &#xff08;agent&#xff09;和 环境,环境是智能体存在和互动的世界。智能体根据当前的环境做出action&#xff0c;action影响环境。然后智能体根据新的环境再进行action。 基础用语 状态&#xff08;state, s&#xff09;&…...

编程日记 2023/9/1 21:12:01

0001__安装electron失败 postinstall: `node install.js`

不一样的 npm 快速安装electron的方案 - 简书 2、手动下载出错的文件 打开浏览器输入 下述网址&#xff0c; 找到你要的版本号&#xff0c; 点击后找到你的平台点击即可下载了。https://registry.npmmirror.com/binary.html?pathelectron/ 作者&#xff1a;一颗人心 链接&…...

编程日记 2023/9/1 21:10:59

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/11/7 21:08:19

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2025/11/8 4:55:33

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2025/11/8 6:47:51

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2025/11/8 9:59:14

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2025/11/7 20:03:29

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

编程新知 2025/11/8 9:15:02

系统掌握PyTorch：图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

编程新知 2025/11/9 7:52:51

在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能

指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...

编程新知 2025/10/8 8:04:56

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...

编程新知 2025/11/9 13:18:15