Vue エントリーの旅を始めましょう
vue プロジェクトの作成は非常に簡単です。以下のいくつかの手順しかありません。
1.node.js をインストールする
公式 Web サイトhttps://nodejs.org/enを開き、指示に従って、システムに応じて直接ダウンロードまたはインストールしてください。
とっても簡単です インストール後、確認のためにターミナルを開いて、以下のコマンドでバージョン番号が正常に出力できれば成功です！
$ node -v
$ npm -v
$ npx -v
2. npm init vue@latest を実行
このステップはすでに正式に vue プロジェクトの作成に入っています, これも非常に簡単です. ターミナルを開いて次のコマンドを実行します.選択肢！
$ npm init vue@latest
3. cd vue-todo-list、npm i、npm run dev を実行します。
このステップは、プロジェクトの実行を開始することです。ブラウザーでプロジェクトを開いて、vue プロジェクトを参照できます。
ターミナルを開いて、3 つのコマンドを実行するだけです。
$ cd vue-todo-list
$ npm i
$ npm run dev
4. コードを書く
上記のコマンドにより、プロジェクトの基本的なディレクトリ構造とファイルが準備されました.次に、コンポーネントを使用して、必要に応じてアプリケーションをビルドおよび実装する必要があります.
この時点で、公式の vue ドキュメントhttps://cn.vuejs.org/guide/essentials/application.htmlを開いて、コードを入力しながらドキュメントを読む必要があります。理解力の強い人は、コーディングに入る前にドキュメントを一通り読むことができるため、何を達成するためにどのモジュールを見つければよいかを大まかに知ることができます。
では、vscode を開いてコードを入力してください。
5. npm run build を実行する
ハードコーディングされたコードは、自分のコンピューターで表示できるだけでなく、他のユーザーにも表示できます。
そのため、プロジェクトをパッケージ化し、公開するためにサーバーにアップロードする必要があります。そして、コマンドは 1 つだけです。
$ npm run build
6. サーバーに nginx をインストールして vue を公開する
Alibaba Cloud や Tencent Cloud などのサーバーにログインし、nginx をインストールしてから、nginx の構成ファイルにtry_filesとrewrite. この 2 つの構成は、ページがあるときにブラウザーが Vue プロジェクトを更新したときに 404 ページが表示されないようにするためのものです. .
# nginx.conf
server {
listen 80;
server_name _;
location / {
root /var/www/build/vue-todo-list;
#重点配置
try_files $uri $uri/ @router;
index index.html index.htm;
}
#重点配置
location @router {
rewrite ^.*$ /index.html last;
# 匹配所有 /index.html last;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
