足場を使ってプロジェクトをゼロから構築したのは2年前でしたが、最近新しいプロジェクトが立ち上げられたばかりでした。プロジェクトを再構築してプロセスを整理することにしました。
手順：
1。ノードをインストールする：ノードの公式Webサイトから安定バージョンをダウンロードしてインストールする必要があります。
2.足場を設置します。
//这里是脚手架3
npm install -g @vue/cli
3.プロジェクトを作成します。
vue create 项目名
次に、次のオプションが表示されます。ここで、vue2とvue3を選択します。ここでvue2を選択します。主な考慮事項は、vue2が比較的成熟していることです。これは、他の同僚が参加して保守するのに便利です。
インストールが完了すると、依存パッケージが自動的にインストールされ、プロジェクトを実行するだけで済みます。
npm run serve
プロジェクトがインストールされると、ディレクトリ構造は次の図のようになります
。4。パブリックフォルダのfavicon.icoアイコンを変更し、独自のアイコンに置き換えます。
5.ルーターをインストールして構成します
npm i vue-router
srcフォルダーの下に新しいルーターフォルダーを作成し、ルーティングファイルを構成します。
import Router from 'vue-router';
import Vue from 'vue';
Vue.use(Router);
let routes = [
{
path:'/',
redirect: '/login'
},{
path:'/login',
name:'login',
component: () => import('@/view/login/index'),
meta:{
title:'登陆'
}
}
]
const router = new Router({
mode:'hash',
routes
})
export default router;
構成後、それをmai.jsにインポートし、インスタンスにマウントします。
import router from './router';
new Vue({
router,
render: h => h(App),
}).$mount('#app')
6.App.vueを変更します
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
7.さまざまな環境のパッケージ化手順を構成します。
この手順は、プロジェクトのフロントエンドとバックエンドから完全に分離されているためです。パッケージ化してオンラインにするときは、手順に従ってさまざまな環境でパッケージを開く必要があります。さまざまな環境（vue-cli2、vue-cli3）でのvueパッケージング手順の構成を
参照できます。
構成後、srcの同じレベルのディレクトリに新しいconfig.jsファイルを作成して、さまざまな環境のサービスアドレスを構成し、それらを公開します。
let baseUrl = '';
switch (process.env.VUE_APP_TITLE) {
case 'test': //测试
baseUrl = 'xxxxxx';
break
default: //默认 - 本地开发
baseUrl = 'xxxxxx'; // 必须是 http 或者 https 开头
}
export default baseUrl;
8.axiosをインストールします
npm i axios
srcフォルダーの下にaxiosフォルダーを作成します
import axios from 'axios';
const service = axios.create({
withCredentials: false,//表示跨域请求时是否需要使用凭证
timeout: 8000 //指定请求超时的毫秒数
})
//请求拦截器
service.interceptors.request.use(request => {
return request
},(error) =>{
return Promise.reject(error);
})
//响应拦截器
service.interceptors.response.use(response => {
return response;
},(error) =>{
return Promise.reject(error);
})
export default service;
axiosフォルダーの下に新しいhttp.jsファイルを作成して、インターフェース要求メソッドをカプセル化します。
import service from './index';
import baseUrl from '../../config'
function http( method, url, params ){
method = method.toLocaleLowerCase()
/**
* post 新增
* put 修改
* get 查询
* delete 删除
* */
if(method == 'post') {
return service.post(url, params)
} else if (method == 'put'){
return service.put(url, params)
} else if (method == 'get'){
return service.get(url, {
params:params})
} else if (method == 'delete'){
return service.delete(url, {
params:params})
}
}
export {
http, baseUrl };
次に、それを直接導入して、インターフェースAPIで使用できます。
import {
http, baseUrl } from '@/axios/http';
const loginApi = {
login(data){
return http('post', `${
baseUrl}/xxxx`, data);
}
}
export default loginApi;
9.srcと同じレベルでvue.config.jsファイルを作成します。ここで厳密モードをオフにしました。
module.exports = {
lintOnSave: false,
productionSourceMap: false,
publicPath: './'
}
10. Vuex構成
プロジェクトでeventBusを使用することはお勧めしません。後のメンテナンスは、面倒です。ここではVuexが使用されています
npm i vuex --save
srcフォルダーの下にストアフォルダーを作成して、関連する属性を構成します。
ここでは、プラグインを使用して、ページを更新するときのvuexのデータ損失の問題を解決します。ページを更新するときのvuexのデータ損失の問題を参照してください。
構成はmain.jsで導入され、インスタンスにマウントされます
import store from './store';
new Vue({
store,
render: h => h(App),
}).$mount('#app')
11.初期化スタイルプラグインを導入します
npm install --save normalize.css
main.jsが導入されました
import 'normalize.css/normalize.css';
12.コンポーネントライブラリは要素を導入します
npm i element-ui -S
次に、main.jsにグローバルにインポートします
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/css/element-variables.scss'
Vue.use(ElementUI);
13、sassをインストールします
npm install sass-loader@10.x --save-dev
npm install node-sass@4.x --save-dev
上位バージョンのnode-sassはインストールできないため、ここでのインストールではバージョンが指定され、上位バージョンのsass-loaderはエラーを報告します。
14.
フィルター、コンポーネント、および命令の統合管理srcフォルダーの下にフィルター、コンポーネント、およびディレクティブフォルダーを作成します。共通のフィルター、コンポーネント、および命令はすべて、対応するファイルで一元的に定義されます。
このようにして、基本的にプロジェクトは正常に構築され、残りはプロジェクト内のページの構造設計です。