vue の入門 - vue スキャフォールディング プロジェクトを作成し、vue プロジェクト (vue2) をそれぞれ Tomcat と nginx でデプロイします

モバイル 2023-09-09 04:39:06 訪問数: null

vue の入門 - vue スキャフォールディング プロジェクトを作成し、vue プロジェクト (vue2) をそれぞれ Tomcat と nginx でデプロイします

1.npmをインストールする

2.Vue CLIをインストールする

  • インストール前に、nrm次のように を使用して Taobao イメージに切り替えることができます。
    nrm use taobao
    ここに画像の説明を挿入します
  • インストールコマンド:
    npm install -g @vue/cli
# OR
yarn global add @vue/cli

sudo 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_demo1

sudo 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 serve

sudo 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 = false


new Vue({
      
      
	
  el:'#dogZool',
  
  render: h => h(App),
  
});
    ここに画像の説明を挿入します

4.4index.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 その他

  • メイン.js

    import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false


new Vue({
      
      
	
  el:'#dogZool',
  
  render: h => h(App),
  
});

  • インデックス.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 に Scaffolding vue プロジェクトをデプロイする

51. Tomcatのインストールと起動

5.2 vue プロジェクトのデプロイ

  • ビルドしたdistファイルをサーバーにアップロードし、webappstomcat ディレクトリに置きます。vue_demo次のように、ここに別のレイヤーを追加しました。
    ここに画像の説明を挿入します

5.3 プロジェクトへのアクセス

  • 直接入力してアクセスします ポート番号に注意してください 以下のように tomact のポートを 8089 に変更しました。
    http://服务器IP:tomact端口/vue_demo/dist/index.html
    ここに画像の説明を挿入します

6. Scaffolding Vue プロジェクトを nginx にデプロイする

6.1 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

    ここに画像の説明を挿入します

  • 再訪する

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 ファイアウォールの問題

7. 発生した問題

7.1 コンポーネント間のスタイルの競合

  • 問題を解決します。次のように、タグの属性
    を使用します。stylescoped
    ここに画像の説明を挿入します

7.2 デプロイメントサーバー上のページが読み込まれない

7.2.1 詳細な質問は次のとおりです。

  • ローカルで開始します。
    ここに画像の説明を挿入します
  • サーバー上:
    ここに画像の説明を挿入します

7.2.2 問題の原因と問題の解決

  • 問題の原因:
    リソース パスの問題、サーバー上のパスが間違っています。パスを解決してください。
  • この問題を解決するには
    、次のように でvue.config.js設定しますpublicPath:'./'。
    ここに画像の説明を挿入します
  • パッケージ化と再展開の問題は解決されました。

8. プロジェクトのダウンロード

おすすめ

転載: blog.csdn.net/suixinfeixiangfei/article/details/132511345
おすすめ
大規模な言語モデルに基づくオープンソースのナレッジベースの質問と回答システムである MaxKB GitHub Star の数が 5,000 を超えました。
ランキング
短线选股的一种方法
Javaクライアントでのユーバーのリズムワークフローで睡眠時間をキャンセルし、再スケジュール
CALIPSOデータバッチダウンロード方式
LeetCode アルゴリズム再帰クラス - ソードはオファー 26 を参照します。 ツリーの部分構造
HTMLのインポート外部CSS、JavaScriptの論文
PostgreSQL 13.1、12.5、11.10、10.15、9.6.20、および9.5.24がリリースされました
アップルは、エラーメッセージがポテトに接続されていた実行する方法ポテトポテトショーをダウンロードすることができません
あなたは空腹で突然電話を切っていますか？これはテクノロジーの裏側ですか、それともテスト用の銃ですか？
VIMエディタのヒント
動的計画法の最長共通部分列（LCS）
アーカイブ
もっと
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

コードワールド

© 2018 codetd.com