Web工程コード構造（VUE）：
├── build //構築関連
├── bin //実行スクリプト
├── public //パブリックファイル
│ ├── favicon.ico //faviconアイコン
│ └── index.html //htmlテンプレート
│ └── robots.txt //反爬虫類
├── src //ソースコード
│ ├── api //すべての要求
│ ├── assets //テーマフォントなどの静的リソース
│ ├── components //グローバル共通コンポーネント
│ ├── directive //グローバル命令
│ ├── layout //レイアウト
│ ├── router //ルート
│ ├── store //グローバルストア管理
│ ├── utils //グローバル共通方法
│ ├── views //view
│ ├── App.vue //入り口ページ
│ ├── main.js //入り口ロードコンポーネント初期化など
│ ├── permission.js //権限管理
│ └── settings.js //システム構成
├── .editorconfig //符号化フォーマット
├── .env.development //開発環境配置
├── .env.production //生産環境の配置
├── .env.staging //試験環境設定
├── .eslintignore //文法チェックを無視する
├── .eslintrc.js //eslint配置項目
├── .gitignore //git無視項目
├── babel.config.js //babel.co.nfig.js
├── package.json //package.json
└── vue.config.js //vue.com fig.js
コードテンプレートの解説
<！-->
<template>
<div></div>
</template>
＜スクリプト＞
//ここでは他のファイルを導入することができます。例えば、コンポーネント、ツールjs、第三者プラグインjs、jsonファイル、写真ファイルなどです。
//例えば、import「コンポーネント名」from'「コンポーネントパス」。
import layout from'@/view/Layout.vue'
export default{
//importで導入したコンポーネントはオブジェクトに注入しなければ使用できません。
components:{layout}
name:''Sample'
ダタ(){
//ここにデータを保管する
return{
｝
}
//モニター属性はdata概念に似ています。
computted:{}
//データの変化をモニタする
ウォッチ:{}
//方法セット
methods:{
}
//ライフサイクル-作成完了（現在のthisインスタンスにアクセスできます）
created(){
}
//ライフサイクル-マウント完了（DOM元素にアクセス可能）
mounted(){
}
beforeCreate（）{}、//ライフサイクル-作成前
before Mount(){}、//ライフサイクル-マウント前
beforeUpdate（）//ライフサイクル-更新前
uudated(){}ライフサイクル-更新後
before Destroy(){}、//ライフサイクル-廃棄前
destroyed(){}、//ライフサイクル-廃棄完了
activated(){}//ページにkeep-aliveキャッシュ機能があれば、この関数はトリガされます。
)
</script>
＜style lang='scss'scoped>
//@import url();公共cssクラスを導入する
</スタイル>
注意点
1.templateにはサブノードが一つしかない。
2.importの場合は、一般的に'@'でsrcディレクトリを表し、具体的にはvue.co nfig.jsに配置されています。
3.styleでは、一般的にスコープを追加して、他のCSSスタイルをカバーしないようにします。