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

入门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）.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/57593.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【GAMES202】Real-Time Environment Mapping2—实时环境光照2

【GAMES202】Real-Time Environment Mapping2—实时环境光照2

一、Shadow from Environment Lighting 上篇我们说了给定Environment&#xff0c;如何计算一个着色点的Shading&#xff0c;但没说Shadow。而事实上&#xff0c;实时渲染中很难做到环境光的Shadow。 原因也很容易想到&#xff0c;一种观点我们把环境光当成多光源问题&#xff…
阅读更多...
PCB电路板电压电流监测软件

PCB电路板电压电流监测软件

PCB电路板电流监测软件详细设计说明书是一个详细描述软件系统设计和实现的文档&#xff0c;它提供了软件系统的架构、功能模块、接口设计、数据存储和处理、界面设计、数据库设计、系统测试、部署和维护计划等方面的详细信息。模拟量采集/老化房采集软件 该文档的目的是为了确保…
阅读更多...
ssm+vue理发店会员管理系统源码和论文

ssm+vue理发店会员管理系统源码和论文

ssmvue理发店会员管理系统源码和论文089 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&a…
阅读更多...
【从零开始学习JAVA | 第四十六篇】处理请求参数

【从零开始学习JAVA | 第四十六篇】处理请求参数

前言&#xff1a; 在我们之前的学习中&#xff0c;我们已经基本学习完了JAVA的基础内容&#xff0c;从今天开始我们就逐渐进入到JAVA的时间&#xff0c;在这一大篇章&#xff0c;我们将对前后端有一个基本的认识&#xff0c;并要学习如何成为一名合格的后端工程师。今天我们介绍…
阅读更多...
ssm+vue线上体验馆管理系统源码和论文

ssm+vue线上体验馆管理系统源码和论文

ssmvue线上体验馆管理系统源码和论文085 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0…
阅读更多...
python web GUI框架-NiceGUI 教程（一）

python web GUI框架-NiceGUI 教程（一）

python web GUI框架-NiceGUI 教程&#xff08;一&#xff09; streamlit可以在一些简单的场景下仍然推荐使用&#xff0c;但是streamlit实在不灵活&#xff0c;受限于它的核心机制&#xff0c;NiceGUI是一个灵活的web框架&#xff0c;可以做web网站也可以打包成独立的exe。 基…
阅读更多...
hdfs操作

hdfs操作

hadoop fs [generic options] [-appendToFile … ] [-cat [-ignoreCrc] …] [-checksum …] [-chgrp [-R] GROUP PATH…] [-chmod [-R] <MODE[,MODE]… | OCTALMODE> PATH…] [-chown [-R] [OWNER][:[GROUP]] PATH…] [-copyFromLocal [-f] [-p] [-l] [-d] … ] [-copyTo…
阅读更多...
电子价签如何让电信门店数字化事半功倍？

电子价签如何让电信门店数字化事半功倍？

数字化转型&#xff0c;高效的工具首先跟上。早在2020年&#xff0c;深圳电信就与云里物里开展商业合作&#xff0c;在深圳所有电信营业厅安装云里物里的ESL电子标签&#xff0c;以替代传统纸质标签的显示。经过几年的效果认证&#xff0c;云里物里的数字化智显设备得到了深圳电…
阅读更多...
Web3.0时代什么时候到来，Web3.0有什么机会？

Web3.0时代什么时候到来，Web3.0有什么机会？

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师…
阅读更多...
什么是亚马逊类目核心关键词？

什么是亚马逊类目核心关键词？

亚马逊类目核心关键词是指在亚马逊平台上&#xff0c;与特定产品类别相关且具有较高搜索量和竞争度的关键词。这些关键词在产品标题、描述、属性和搜索关键字等位置使用&#xff0c;有助于提高产品的曝光度和搜索排名&#xff0c;并吸引潜在买家的注意。选择适当的核心关键词可…
阅读更多...
Flink Kubernates Native - 入门

Flink Kubernates Native - 入门

创建 namespace [rootCentOSA flink-1.17.1]# kubectl create ns flink-native [rootCentOSA flink-1.17.1]# kubectl config set-context --current --namespaceflink-native命令空间添加资源限制 [rootCentOSA flink-1.17.1]# vim namespace-ResourceQuota.yamlapiVersion:…
阅读更多...
IDEA的maven想显示层级关系，而非平级

IDEA的maven想显示层级关系，而非平级

新版和旧版的IDEA的位置不一样&#xff0c;2023.2.1的版本在右上角的“” 这个位置 如图所示&#xff1a; 然后点击按模块分组&#xff1a;
阅读更多...
在项目中快速搭建机器学习的流程

在项目中快速搭建机器学习的流程

在软件开发领域&#xff0c;机器学习框架发挥着关键作用&#xff0c;为开发人员提供强大的人工智能工具、库和算法&#xff0c;以有效地利用机器学习的潜力。从本质上讲&#xff0c;机器学习使计算机能够从数据中学习并做出预测或决策&#xff0c;而无需明确编程。 机器学习框…
阅读更多...
腾讯云服务器配置CPU内存怎么选？带宽多大合适？

腾讯云服务器配置CPU内存怎么选？带宽多大合适？

腾讯云服务器配置如何选择&#xff1f;CPU内存、带宽和系统盘怎么选择合适&#xff1f;个人用户可以选择轻量应用服务器&#xff0c;企业用户可以选择云服务器CVM&#xff0c;2核2G3M带宽轻量服务器95元一年、2核4G5M服务器168元一年&#xff0c;企业用户可以选择标准型S5云服务…
阅读更多...
Java 大厂面试 —— 常见集合篇 List HashMap 红黑树

Java 大厂面试 —— 常见集合篇 List HashMap 红黑树

23Java面试专题 八股文面试全套真题&#xff08;含大厂高频面试真题&#xff09;多线程_软工菜鸡的博客-CSDN博客 常见集合篇-01-集合面试题-课程介绍 02-算法复杂度分析 2 List相关面试题 2.1 数组 2.1.1 数组概述 数组&#xff08;Array&#xff09;是一种用连续的内存空…
阅读更多...
Visual Studio中Linux开发头文件intellisense问题的解决办法

Visual Studio中Linux开发头文件intellisense问题的解决办法

文章目录 前言个人环境 SSH到WSL复制文件后记 前言 最近在用我心爱的Visual Studio配合WSL2做一些Linux开发&#xff0c;但是有一个问题&#xff0c;就是当我#include <sys/socket.h>&#xff0c;会提示找不到文件 我尝试了各种姿势&#xff0c;包括修改CMakeSettings.…
阅读更多...
与面试官互动：建立积极的技术讨论氛围

与面试官互动：建立积极的技术讨论氛围

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…
阅读更多...
在 AWS 中导入 qcow2 镜像

在 AWS 中导入 qcow2 镜像

文章目录 在 AWS 中导入 qcow2 镜像使用的格式和问题步骤概述前提条件转换镜像格式并上传至 S3创建角色并配置策略策略文件内容创建container.json配置文件导入镜像创建 AMI 并启动实例参考:在 AWS 中导入 qcow2 镜像 当我们在多云环境中部署应用时，有时候可能需要把基于 qem…
阅读更多...
C语言学习笔记（完整版）

C语言学习笔记（完整版）

文章目录 算法算法的基本概念算法的特征算法的优劣 描述算法三种基本结构流程图N-S流程图伪代码 常量和变量了解数据类型常量整形常量实型常量字符型常量转义字符符号常量 变量整形变量实型变量字符型变量 表达式与运算符赋值运算符和赋值表达式变量赋初值强制类型转换 算术运算…
阅读更多...
Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【六】

Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【六】

&#x1f600;前言 本篇博文是关于Spring Boot(Vue3ElementPlusAxiosMyBatisPlusSpring Boot 前后端分离)【六】&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023