Getting started with vue - create a vue scaffolding project and deploy the vue project (vue2) with tomcat and nginx respectively

1. Install npm

• Please refer to the following articles for details:
  npm common commands + commonly used front-end package management tools and npm Taobao image configuration, etc.

2. Install Vue CLI

• Before installation, you can use to nrmswitch to the Taobao image, as follows:

  nrm use taobao
  

  
• Installation command:

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

  
• Use the command to view the installed version

  vue
  vue -V
  

  
• Official website address:
  https://cli.vuejs.org/zh/ .

3. Create vue_demo1 project (official website)

3.1 Create vue_demo1 project

3.1.1 Create a project

• Order:

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

  

3.1.2 Solve the sudo problem

• It is quite troublesome to have to add sudo every time. If you want to solve it, follow the prompts and read the prompts first, as follows:
  
• Enter the prompt command to solve:

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

  

3.2 View the created vue_demo1 project

3.2.1 Project structure

• as follows:
  

3.2.2 Brief description of project structure

• main.jsThe file is the entry point of the project
  
• App.vueComponent is the parent component of all components
  

3.3 Run the vue_demo1 project

• The command is as follows:

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

  
• access:
  

4. Create vue_demo2 project (introductory exercise)

4.1 Create a project

• Like the above steps, create a new project vue_demo2 for modification exercises. The creation process will not be introduced again.

4.2 Writing components

• The component structure is as follows:
  

4.3 Write main.js

• as follows:

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

  

4.4 Write index.html

• as follows:
  

4.5 Start to see the effect

• Package project

  npm run build
  

• Start command:

  npm run serve
  

• Effect:
  

  

4.6 Attached code

4.6.1 Components

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

• main.js

  import Vue from 'vue'
  import App from './App.vue'
  
  Vue.config.productionTip = false
  
  
  new 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. Deploy scaffolding vue project on tomact

51. Install and start tomcat

• Regarding the installation of tomcat and other issues, solve it yourself, or refer to the following article:
  Install tomact under linux .

5.2 Deploy the vue project

• Upload the built distfile to the server and put it webappsin the tomcat directory. I added another layer here vue_demo, as follows:
  

5.3 Access projects

• Enter it directly and access it. Pay attention to the port number. I changed the tomact port to 8089, as follows:

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

  

6. Deploy scaffolding vue project on nginx

6.1 About the installation and configuration of nginx, etc.

• For information about the installation and configuration of nginx, please read the following article
  • Nginx 01 - Nginx detailed installation steps and various Nginx startup methods
  • Nginx 02 - Nginx basic configuration and parameter description
  • Nginx 03 - Nginx configuration example

6.2 Upload the packaged dist file to the server

6.2.1 Upload server

• The storage directory is as follows:

  cd /nginx_test/vue_project/vue_demo
  

  

6.2.2 Attention issue-403

• I just put the project under the susu user here, as follows:
  

• The first problem is 403, as follows:
  

• Cause of the problem:
  I started nginx here as the root user, so there is an access permission issue.

• Solve the problem:
  Solution:Change the startup user of nginx to the user of the directory, restart Nginx to solve the problem, the configuration is as follows:

  user susu
  

  

• revisit

  • After modifying the configuration, restart nginx as the root user and access it again. The problem is solved.

  • Of course, you can also start it with the susu user, or nginx installed by the root user, as follows:

    sudo ./nginx 
    

    

    If it cannot be started due to permission issues, please refer to the following article:
    Create a new user under Linux and authorize the user and solve the problem that sudo cannot be used .

6.3 Configure nginx

• as follows:

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

  

6.4 Restart nginx and visit to see the effect

• as follows:

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

  

6.5 Firewall issues

• If access is denied and you want to check the firewall problem, you can read the following article:
  Check the firewall status, turn off the firewall, open and close ports, etc. under Linux .

7. Problems encountered

7.1 Style conflicts between components

• Solve the problem:
  Use the attribute styleon the tag scoped, as follows:
  

7.2 The page on the deployment server does not load

7.2.1 Detailed questions are as follows:

• Start locally:
  
• On the server:
  

7.2.2 Problem Cause + Problem Solving

• Cause of the problem:
  Resource path problem, the path on the server is wrong, just solve the path
• To solve the problem: configure it in
  , as follows:vue.config.jspublicPath:'./'
  
• Packaging and redeployment problem solved!

8. Project download

• Download: Getting started with vue scaffolding project demo (vue2) .