Comenzando con vue: cree un proyecto de andamiaje de vue e implemente el proyecto de vue (vue2) con tomcat y nginx respectivamente

1. Instalar npm

• Consulte los siguientes artículos para obtener más detalles:
  comandos comunes de npm + herramientas de administración de paquetes front-end de uso común y configuración de imágenes de npm Taobao, etc.

2. Instale la CLI de Vue

• Antes de la instalación, puede utilizar para nrmcambiar a la imagen de Taobao de la siguiente manera:

  nrm use taobao
  

  
• Comando de instalación:

  npm install -g @vue/cli
  # OR
  yarn global add @vue/cli
  
  sudo npm install -g @vue/cli  #Mac
  

  
• Utilice el comando para ver la versión instalada.

  vue
  vue -V
  

  
• Dirección del sitio web oficial:
  https://cli.vuejs.org/zh/ .

3. Cree el proyecto vue_demo1 (sitio web oficial)

3.1 Crear proyecto vue_demo1

3.1.1 Crear proyecto

• Orden:

  vue create vue_demo1
  
  sudo vue create vue_demo1   # Mac的要想解决这个sudo的束缚，看下面的 3.1.2 解决 sudo 问题
  

  

3.1.2 Resolver problemas de sudo

• Es bastante problemático tener que agregar sudo cada vez. Si desea resolverlo, siga las instrucciones y lea las indicaciones primero, de la siguiente manera:
  
• Ingrese el comando rápido para resolver:

  sudo chown -R 501:20 "/Users/XXX/.npm"
  

  

3.2 Ver el proyecto vue_demo1 creado

3.2.1 Estructura del proyecto

• como sigue:
  

3.2.2 Breve descripción de la estructura del proyecto

• main.jsEl archivo es el punto de entrada al proyecto.
  
• App.vueEl componente es el componente principal de todos los componentes.
  

3.3 Ejecutar el proyecto vue_demo1

• El comando es el siguiente:

  npm run serve
  
  sudo npm run serve  # Mac权限问题用这个
  

  
• acceso:
  

4. Cree el proyecto vue_demo2 (ejercicio introductorio)

4.1 Crear proyecto

• Al igual que en los pasos anteriores, cree un nuevo proyecto vue_demo2 para los ejercicios de modificación y el proceso de creación no se introducirá nuevamente.

4.2 Componentes de escritura

• La estructura de componentes es la siguiente:
  

4.3 Escribir main.js

• como sigue:

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

  

4.4 Escribir index.html

• como sigue:
  

4.5 Empieza a ver el efecto

• Proyecto de paquete

  npm run build
  

• Comando de inicio:

  npm run serve
  

• Efecto:
  

  

4.6 Código adjunto

4.6.1 Componentes

• 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>
  

• PerroInfo.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>
  

• aplicación.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 Otros

• principal.js

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

• índice.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. Implementar el proyecto scaffolding vue en tomact

51. Instalar e iniciar Tomcat

• Con respecto a la instalación de Tomcat y otros problemas, resuélvalo usted mismo o consulte el siguiente artículo:
  Instalar tomact en Linux .

5.2 Implementar proyecto vue

• Cargue el distarchivo compilado en el servidor y colóquelo webappsen el directorio de Tomcat. Agregué otra capa aquí vue_demo, de la siguiente manera:
  

5.3 Proyectos de acceso

• Ingrese directamente y acceda, preste atención al número de puerto, cambié el puerto de tomact a 8089, de la siguiente manera:

  http://服务器IP:tomact端口/vue_demo/dist/index.html
  

  

6. Implementar el proyecto scaffolding vue en nginx

6.1 Acerca de la instalación y configuración de nginx, etc.

• Para obtener información sobre la instalación y configuración de nginx, lea el siguiente artículo
  • Nginx 01: pasos detallados de instalación de Nginx y varios métodos de inicio de Nginx
  • Nginx 02: configuración básica de Nginx y descripción de parámetros
  • Nginx 03: ejemplo de configuración de Nginx

6.2 Cargue el archivo dist empaquetado al servidor

6.2.1 Servidor de carga

• El directorio de almacenamiento es el siguiente:

  cd /nginx_test/vue_project/vue_demo
  

  

6.2.2 Problema de atención-403

• Acabo de poner el proyecto bajo el usuario susu aquí, de la siguiente manera:
  

• El primer problema es 403, de la siguiente manera:
  

• Causa del problema:
  inicié nginx aquí como usuario root, por lo que hay un problema de permiso de acceso.

• Resuelva el problema:
  Solución:Cambie el usuario de inicio de nginx al usuario del directorio, reinicie Nginx para solucionar el problema, la configuración es la siguiente:

  user susu
  

  

• volver a visitar

  • Después de modificar la configuración, reinicie nginx como usuario root y acceda nuevamente, el problema está solucionado.

  • Por supuesto, también puedes iniciarlo con el usuario susu o nginx instalado por el usuario root, de la siguiente manera:

    sudo ./nginx 
    

    

    Si no se puede iniciar debido a problemas de permisos, consulte el siguiente artículo:
    Cree un nuevo usuario en Linux y autorícelo y resuelva el problema de que no se puede usar sudo .

6.3 Configurar nginx

• como sigue:

    server {
        
        
        listen 9007;
        server_name 服务器IP;
  
        location /dist/ {
        
        
  #        root  /home/susu/vue_project/vue_demo/;
          root  /nginx_test/vue_project/vue_demo/;
       }
   }
  

  

6.4 Reinicie nginx y visite para ver el efecto

• como sigue:

  http://服务器IP:9007/dist/index.html
  

  

6.5 Problemas con el cortafuegos

• Si se deniega el acceso y desea comprobar el problema del firewall, puede leer el siguiente artículo:
  Verifique el estado del firewall, apague el firewall, abra y cierre puertos, etc. en Linux .

7. Problemas encontrados

7.1 Conflictos de estilo entre componentes

• Resuelva el problema:
  use el atributo styleen la etiqueta scoped, de la siguiente manera:
  

7.2 La página en el servidor de implementación no se carga

7.2.1 Las preguntas detalladas son las siguientes:

• Comience localmente:
  
• En el servidor:
  

7.2.2 Causa del problema + Resolución del problema

• Causa del problema:
  problema de ruta de recursos, la ruta en el servidor es incorrecta, simplemente resuelva la ruta
• Para solucionar el problema: configúrelo en
  , de la siguiente manera:vue.config.jspublicPath:'./'
  
• ¡Problema de embalaje y redistribución resuelto!

8. Descarga del proyecto

• Descargar: Introducción a la demostración del proyecto vue scaffolding (vue2) .