Vueスキャフォールディングの設置方法 - 2023年5月28日版
目次
npm グローバル フォルダーとキャッシュ フォルダーの設定
ノードのダウンロード
ノードのバージョンは最新バージョンを使用します。
ダウンロード後すぐに解凍してください
ノード環境変数の設定
解凍したバージョンをダウンロードしたので、直接環境を設定できます。
コンピューターを開き、プロパティを開き、環境変数を構成します
以下の手順に従ってください。
npmのバージョンを確認する
npm -v
npm グローバル フォルダーとキャッシュ フォルダーの設定
現在のフォルダーの下に[ node_global ] と [ node_cache ]の 2 つのフォルダーを作成します
［新しいフォルダー］を右クリック
[cmd] を開いて構成の場所を変更します。
ご自身でフォルダパスを変更して実行することも可能です。
npm config set prefix "D:\save\exe\Servers\nodejs\node-v20.2.0-win-x64\node_global"
npm config set cache "D:\save\exe\Servers\nodejs\node-v20.2.0-win-x64\node_cache"実行効果:
設定が成功したかどうかを確認する
npm config list
国内「アリ」の鏡像を修正
外国ミラーアドレスの場合は国内に変更され、国内ミラーアドレスの場合は変更されません。
npm config set registry=http://registry.npm.taobao.org
npm config list
このコマンドを通じて、淘宝網からのものかどうかを直接確認できます。
npm config get registry
Vue 情報を表示する
npm info vue
これをコピーしましょう。ここで、[-g] はグローバルにインストールされたフォルダー、つまり、構成した [D:\save\exe\Servers\nodejs\node-v20.2.0-win-x64\node_global] を表します。
npm install -g [email protected]対応するバージョンに直接アップグレードします。
VUE とルーティングをインストールする
npm install vue -g
npm install vue-router -gグローバル フォルダーの [node_modules] に、先ほどインストールした xue ルーターと vue ルーターが表示されます。
Vueクライアントをインストールする
npm install vue-cli -g異常なプロンプトが表示されますが、230 個のファイルが正常にインストールされます。
vue init をインストールする
npm install -g @vue/cli-init
vue バージョンを表示する
vue -V
新しい環境変数を構成する
手順に従ってください
Vueプロジェクトを作成する
特記事項: プロジェクト名を数字で始めることはできず、プロジェクト ヒットでは大文字も許可されません。
空のフォルダーを見つけてプロジェクトを作成します。
vue init webpack vue01
完成したエフェクトを作成します。
計画
Vue プロジェクトを開始する
cd vue01
npm run devそれを許可するためのネットワークプロンプトがあります。
サービスコマンドページ
Vue サービス パスを介したアクセス
アクセス成功: http://localhost:8080/
Vue レベルの説明
ソースディレクトリ
veturプラグインのインストール
拡張機能内の最初の vetur インストールを検索するだけです。
デモの例
<hr/>
<input type="text" v-model="msg" placeholder="与msg双向绑定"/>
<hr/>
試験結果：
ルータールーティング
ルート使用構文:
<!-- 字符串 -->
<router-link to="/home">Home</router-link>
<!-- 渲染结果 -->
<a href="/home">Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link :to="'/home'">Home</router-link>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link :to="{ path: '/home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: '9527' }}">User</router-link>
<!-- 有查询参数，下面的结果为 `/register?plan=private` -->
<router-link :to="{ path: '/register', query: { plan: 'private' }}">
Register
</router-link>ルーティングの実践:
コンポーネントの下に 3 つのコンポーネントを追加します: [demo1.vue]、[demo2.vue]、[demo3.vue]
ルーティングを設定します。
[router]配下のindex.jsでルーティングを操作します。
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import demo1 from '@/components/demo1'
import demo2 from '@/components/demo2'
import demo3 from '@/components/demo3'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{ path: '/demo1', name: 'demo1', component: demo1 },
{ path: '/demo2', name: 'demo2', component: demo2 },
{ path: '/demo3', name: 'demo3', component: demo3 }
]
})3 つのデモすべてにルートを追加しました。
ホーム ページにハイパーリンクを追加する
<hr/>
<router-link to="/demo1">我是demo1</router-link>
<router-link to="/demo2">我是demo2</router-link>
<router-link to="/demo3">我是demo3</router-link>
<hr/>追加したファイルは「App.vue」ですが、これを途中に直接点在させてhrで分割するだけです。
ページ効果:
ジャンプ効果: パスがコンテンツと一致し、テストは成功します。
テーブルトラバーサルテストのデモ3
次のコードをdemo3.vueファイルにコピーします。
<template>
<div>
<h1>组件路径Demo1</h1>
<table border="1">
<tr>
<td>编号</td>
<td>姓名</td>
<td>简介</td>
</tr>
<tr v-for="(item,key) in list" :key="key">
<td>{
{item.id}}</td>
<td>{
{item.name}}</td>
<td>{
{item.introduce}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data(){
return {
list:[
{id:1,name:"学习强国",introduce:"人民有信仰"},
{id:2,name:"强国强己",introduce:"国强民必强"}
]
}
}
}
</script>
<style>
table{
width:100%;text-align:center;
}
</style>これを、demo3.vue ファイルに直接コピーします。
axios 操作を導入します (ajax と同等)。
import axios from 'axios'
エラーメッセージ。
Ctrl+c でサービスを停止し、プロンプトに従ってコマンドを実行します。
再起動：
npm run dev
Axios の例:
データの準備。
[
{ "id": 1, "name": "学习强国", "introduce": "人民有信仰" },
{ "id": 2, "name": "强国强己", "introduce": "国强民必强" }
]
静的静的パスのアクセステスト:
http://localhost:8080/static/data.json
Axios は json ファイルを解析します。
以下のdemo2.vueのコードをすべて置き換えます。
<template>
<div>
<h1>组件路径demo2</h1>
<table border="1">
<tr>
<td>编号</td>
<td>姓名</td>
<td>简介</td>
</tr>
<tr v-for="(item,key) in list" :key="key">
<td>{
{item.id}}</td>
<td>{
{item.name}}</td>
<td>{
{item.introduce}}</td>
</tr>
</table>
</div>
</template>
<script>
import axios from 'axios'
export default {
data(){
return{
list:""
}
},created:function(){
var _this = this;
var url = "./static/data.json";
axios.get(url).then(
function(res) {
_this.list = res.data;
});
}
}
</script>
<style>
table{
width:100%;
border-collapse: collapse;
}
</style>効果：
これは、json が例外なく解析されたことを意味します。
ここまでで vue の基本的な操作を説明しましたが、ここまででフロントエンドの知識があればほぼ始められると思いますので、頑張ってください。