1.node.js環境のダウンロード
Node.js は Java の jdk に相当しますが、サーバー側では JavaScript です. node.js パッケージを npm で管理する必要があり、node.js の拡張機能を npm でダウンロードできます.
①まずnode.jsのインストールパッケージをダウンロード
https://nodejs.org/zh-cn/download/releases/ (以前のバージョン)
②環境変数を設定するnode.jsのダウンロードパスを選択（通常は自動設定）
jdk 環境変数の構成と同様に、node.js インストール パスをコピーします。
③ 環境変数を設定したら、cmd で node -v および npm -v コマンドを使用して、node.js のダウンロードが成功したかどうかを確認できます。
2. Vue-cli プロジェクトを作成する
バックエンド プログラマーにとっては、プロジェクトをすばやく作成するためのツールを使用するのが最も低コストの方法です. ここでは、HBuilderX ソフトウェアを使用して補助的な構築を行います. Vue プロジェクトは、node.js 環境のコマンドを使用して構築することもできます. ここでは、ただし Elaborate
HbuilderX を使用して、vue プロジェクトをすばやく作成します。[新規] をクリックすると、vue プロジェクトのバージョンを選択できます。ここでは、バージョン 2.6.10 を選択します。
プロジェクトが正常に作成されると、右下隅にプロンプト ボックスが表示されます (この手順では、サーバーから多くのパッケージ ファイルをダウンロードする必要があります)。
プロジェクトが正常に作成されたら、Hbuilder の下部にあるコマンド ライン ウィンドウの中央にあるアイコンをクリックして、プロジェクトのターミナルを開きます. 正常に開いたら、npm run serve コマンドを使用してプロジェクトを実行します
ターミナルで ctrl+c コマンドを使用して、プロジェクトの実行を終了します。
3. コンポーネント ルーティングのダウンロード
vue ルーターは、Vue.js の公式ルーティング マネージャーです。Vue.js のコアと深く統合されているため、単一ページのアプリケーションを簡単に構築できます。
①インストール
プロジェクトが終了したら、ターミナルで npm i [email protected] コマンドを使用して、vue-router プラグイン パッケージをダウンロードできます。
1.ルーターディレクトリを作成する
このディレクトリに index.js ファイルを作成し、その中でルーティングを構成し、新しいコンポーネントが追加されるたびに index.js にインポートします
import Vue from 'vue';
import router from 'vue-router'; /* import route*/
/* import component*/
import Login from '../Login.vue';
import Main from '../Main.vue'; ';
Vue.use
(router);
/* コンポーネントのルーティングを定義します*/
var
rout = new router({
routes: [
{
//path はカスタム コンポーネント アドレスです
path: '/login',
name: 'Login' ,
//component は上記でインポートされたコンポーネントの名前です
component: Login
},
{
path: '/main',
name: 'Main',
component: Main
}
]
});
//ルーティング オブジェクトをエクスポート
export default rout;
2.ルーティングを使用する
メインコンポーネントの App.vue に template タグを書き込む
< router-link to="/index">首页< /router-link> < router-link to="/content">内容</ router-link> < router-view/>
3. main.js でルーティングを構成する
'./router/index.js' からルーターをインポート
Vue.use(router);
new Vue({
el: '#app',
router,
render: h => h(App)
})
4. elementUI フレームワークをダウンロードする
①ターミナルでnpm i element-ui -SコマンドでElementUIフレームワークをダウンロード
② main.js に以下の内容を記述します。
「element-ui」から ElementUI をインポートします。
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); new View({ render: h => h(App), }).$mount('#app');