目次
4. axios をインストールします (自分でインストールする必要があります)
6. ElementUIをインストールする[自己インストール]
予防
コンポーネント フォルダー: 主に繰り返し使用されるモジュールを作成します
ビュー: ページを作成します
ファイル命名形式: 大文字で開始し、少なくとも 2 つの単語、例: ClassPage.vue
インストールおよび構成する場合: 最初に正しいプロジェクト フォルダーを入力します
1. Vue スキャフォールディングを作成する
中国語名は出てこない
vue create lean-router2.プロジェクトの開始
必ずしも次のようになるとは限りません。特定のプロジェクト構成には特定の起動コマンドがあります。
cd lean-router
npm run serve3. ルーティング VueRouter をインストールする
(1) VueCLIスキャフォールディング構築時に自動で設定をインストールできる
(2) 自分でインストールすることもできます。コマンドは次のとおりです。
npm install vue-router@3
npm run serve4. axios をインストールします (自分でインストールする必要があります)
(1) インストール
npm install axios(2) カプセル化
① srcフォルダー=「requestフォルダー=「request.js」配下に新規フォルダーを作成
import axios from 'axios';
创建实例
const instance = axios.create({
baseURL:"",
timeout:1000,//超时则中断请求
})
export default instance②srcフォルダ＝「新規APIフォルダ＝about.js、home.js、index.js」
import instance from "@/request/request.js"export function Rainbow(params){
return instance({
url:'/caihongpi/index',
method:"GET",
params:params,//params
})
}
export function Flatterer(data){
return instance({
url:'/tiangou/index',
method:"POST",
data,
headers:{
'content-type':'application/x-www-form-urlencoded'
}
})
}5.vuexをインストールする
(1) インストール
npm install vuex@3(2) 構成
main.js ファイルを入力して vuex を導入して構成します
import vuex from "vuex";
Vue.use(Vuex);6. ElementUIをインストールする[自己インストール]
(1) インストール
npm i element-ui -S(2) 構成
main.js ファイルを入力して、ElementUI コンポーネント ライブラリをインポートします
import ElementUI from 'element-ui'; //引入
import 'element-ui/lib/theme-chalk/index.css'; //引入
Vue.use(ElementUI); //使用7. パッケージ化【プロジェクトの提出】
npm run build