目次
1.2 npm Taobao 画像アクセラレーション構成 (ネットワーク速度に依存するため、構成できません)
1.2.3.1 Taobao ミラー ソースを使用するように npm を構成する
1.2.3.3 npm ウェアハウスのアドレスを復元したい場合は、そのアドレスを npm ミラーとして設定するだけです。
1.4.1 新しいプロジェクト フォルダー wn-market-web を作成する
1.4.2 npm runserve 実行時のエラー問題の解決
1.4.3 新しく作成したwn-market-webフォルダーでcmdコマンドを開き、npm runserveを実行します。
1.5.2.2 アプリで vue コンポーネントを有効にする
1.7.3.1 新しいフォルダー src/router を作成する
1.7.3.2 ルーターは新しいファイルindex.jsを作成します
1.8.2 src フォルダーの下に新しいフォルダー utils を作成します。
1.8.3 新しいファイル request.js を作成して設定する
1.1 Node.js
1.1.1 はじめに
- Node.js は、オープンソースのクロスプラットフォーム JavaScript ランタイム環境です。
1.1.2 ダウンロード
- ダウンロード アドレス:Node.Js 中国語 Web サイト
[画像: Node.js をダウンロード]
1.1.3 インストール
【図：Node.jsのインストール】
[注] ここでインストールアドレスをカスタマイズできます
1.1.4 インストール完了テスト
- Windows の cmd コマンドを開き、node -v および npm -v を入力してバージョン番号を確認すると、表示されます。
【例】
C:\Users\Adminstrator>node -v
v18.16.0
C:\Users\Adminstrator>npm -v
9.5.1【概略図：設置完了・動作確認済み】
1.2 npm Taobao 画像アクセラレーション構成 (ネットワーク速度に依存するため、構成できません)
1.2.1 タオバオミラー公式ウェブサイトのアドレス
- npmmirror 中国ミラー サイト:npmmirror ミラー サイト
1.2.2 単回使用
npm install --registry=https://registry.npm.taobao.org1.2.3 永久使用
1.2.3.1 Taobao ミラー ソースを使用するように npm を構成する
1. 次のようにコマンドラインで直接設定します。
npm config set registry https://registry.npm.taobao.org2. グローバル ダウンロード ミラー サイトとして設定することもできるので、インストールするたびに --registry を追加する必要はありません. デフォルトでは、淘宝網ミラーからダウンロードされます. 設定方法は次のとおりです:
- .npmrc ファイルを開きます (nodejs\node_modules\npm\npmrc、そうでない場合は、git コマンド ラインを使用して作成できます (.npmrc をタッチ)、cmd コマンドを使用して作成すると、エラーが報告されます)
- レジストリ =https://registry.npm.taabao.org を追加するだけです。
1.2.3.2 検証が成功した
// 配置后可通过下面方式来验证是否成功
npm config get registry
// 或
npm info expressこのようにして、cnpm に変更することなく、実際の淘宝網の画像がそのまま使用されるようになります。
1.2.3.3 npm ウェアハウスのアドレスを復元したい場合は、そのアドレスを npm ミラーとして設定するだけです。
npm config set registry https://registry.npmjs.org/1.2.4 使用方法
1.2.4.1 インストールコマンド
- デフォルトの npm の代わりに Alibaba のカスタマイズされた cnpm コマンド ライン ツールを使用し、次のコードを入力してインストールします。
npm install -g cnpm --registry=https://registry.npm.taobao.org1.2.4.2 cnpm バージョンの検出
- cnpmのバージョンを確認し、インストールが成功するとcnpmの基本情報が表示されます。
cnpm -v1.2.4.3 後でプラグインをインストールする
- 今後プラグインをインストールするには、cnpm install を使用するだけで済みます。
cnpm install <插件名>- npm install インストール方法に慣れていて、Alibaba の cnpm コマンド ツールをダウンロードしてコマンドを cnpm に変更したくない場合はどうすればよいでしょうか?ノードの倉庫アドレスを淘宝網ミラーの倉庫アドレスに変更するだけです。
1.3 vue-cli
1.3.1 はじめに
- vue-cli は、vue プロジェクトを迅速に構築するためのスキャフォールディング ツールです。
- Vue CLI は正式にリリースされた vue.js プロジェクト スキャフォールディングであり、Vue CLI を使用すると、vue 開発環境と対応する Webpack 構成を迅速に構築できます。
- CLI は Command-Line Interface であり、コマンド ライン インターフェイスと訳されますが、一般的にはスキャフォールディングとして知られています。
- Vue CLI は、正式にリリースされた vue.js プロジェクト スキャフォールディングです。
- vue-cli を使用して、Vue 開発環境と対応する Webpack 構成を迅速に構築します。
1.3.2 インストール
- Windows cmd コマンドライン入力: npm install -g @vue/[email protected]
[cmdコマンド: vue-cliのインストール]
npm install -g @vue/[email protected]【例】
C:\Users\Administrator>npm install -g @vue/[email protected]- 以下のように表示されるので、デフォルトの Default ([Vue 2] babel、eslint) を実行することを選択し、Enter を押します。
【例】
Vue CLI v4.5.15
┌──────────────────────────────────────────┐
│ │
│ New version available 4.5.15 → 5.0.8 │
│ Run npm i -g @vue/cli to update! │
│ │
└──────────────────────────────────────────┘
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
Manually select features1.3.3 テスト
- Windows cmd コマンドライン入力: vue --version
[cmdコマンド:test vue-cli]
vue --version【例】
C:\Users\Administrator>vue --version
@vue/cli 4.5.151.4 Vueプロジェクト
1.4.1 新しいプロジェクト フォルダー wn-market-web を作成する
[回路図]
1.4.2 npm runserve 実行時のエラー問題の解決
- 新しく作成したフォルダー wnhz-market の下にある package.json ファイル内のスクリプトのサーブ コードとビルド コードを変更します。
[ソースコード：エラー修正]
"serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "SET NODE_OPTIONS=--openssl-legacy-provider &&vue-cli-service build",[回路図]
1.4.3 新しく作成したwn-market-webフォルダーでcmdコマンドを開き、npm runserveを実行します。
- 新しい wn-market-web フォルダーを開き、cmd コマンドを開いて npm runserve を実行します。
[回路図]
1.4.4 テスト
- ブラウザ入力:http://localhost:8080/
[回路図]
1.5 フロントエンドプロジェクトの開始
1.5.1 基本構成
[回路図]
1.5.2 開発プロセス
1.5.2.1 カスタム vue コンポーネント
- コンポーネントフォルダーに新しいvueファイルを作成します
- 命名規則:最初の文字は大文字です。vue
[回路図]
1.5.2.2 アプリで vue コンポーネントを有効にする
1.6 elementUIの紹介
1.6.1 CDN テクノロジー
【コンセプトマップ】
1.6.2 ダウンロード
- 参考 [1.4.3] cmd コマンドラインに「npm i element-ui -S」と入力します。
【模式図：ダウンロード要素UI】
1.6.3 使用方法
[例:App.vue]
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
<!-- <Hello txt="你好啊，vue-lic"/> -->
<Login/>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
// import Hello from './components/Hello.vue'
import Login from './components/Login.vue'
export default {
name: 'App',
components: {
// HelloWorld,
// Hello,
Login,
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>[例: main.js]
import Vue from 'vue'
import App from './App.vue'
/* 引入ElementUI */
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
/* 引入ElementUI */
Vue.use(ElementUI)
new Vue({
render: h => h(App),
}).$mount('#app')1.7 ルーティング
1.7.1 動作機構
【コンセプトマップ】
1.7.2 vue-router のインストール
【注文】
npm i [email protected]【図：vue-routerインストール後の様子】
1.7.3 ルーターの設定
1.7.3.1 新しいフォルダー src/router を作成する
[回路図]
1.7.3.2 ルーターは新しいファイルindex.jsを作成します
[回路図]
[例: src/router/index.js]
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Register from '../components/Register.vue'
import Show from '../components/Show.vue'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
base: '/',
routes:[
{
path: '/login',
component: Login
},
{
path: '/register',
component: Register
},
{
path: '/show',
component: Show
}
]
});
export default router;[例: main.js]
import Vue from 'vue'
import App from './App.vue'
/* 引入ElementUI */
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
/* 引入路由router */
import router from './router';
Vue.config.productionTip = false
/* 引入ElementUI */
Vue.use(ElementUI)
/* 引入路由router */
Vue.use(router)
new Vue({
render: h => h(App),
/* 调用路由router */
router,
}).$mount('#app')
[例:App.vue]
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>1.8 軸の設定
1.8.1 axiosのインストール
[コマンド: axios をインストール]
npm i axios -S1.8.2 src フォルダーの下に新しいフォルダー utils を作成します。
1.8.3 新しいファイル request.js を作成して設定する
[例: src/utils/request.js]
import axios from 'axios'
const $request = axios.create({
timeout: 5000
});
$request.interceptors.request.use(
config=>{
config.headers['Content-Type']='application/json;charset=utf-8';
return config;
},error=>{
return Promise.reject(error);
}
);
export default $request;1.8.4 使用方法
1.vueに設定をインポートする
import $request from '../utils/request'2. axios の代わりに $request を使用します