vue2、Vue3 スキャフォールディング、インターフェイスのカプセル化、プロキシ サーバー構成、vuex ウェアハウス、リクエスト インターセプター構成。

Vue2足場建設プロ​​ジェクト:

vue プロジェクトを作成します。

1、vueコマンドラインモジュールvue-cliをグローバルにインストールします

npm install vue-cli -g

注: vue-cli は Webpack に依存します。vue-cli を使用する前に、最初に Webpack をインストールしてください。

npm install webpack -g

2**、プロジェクト フォルダーを作成し、このフォルダーの下でコマンド ラインを開きます**

**3、vue プロジェクトを初期化します**

vue init Webpack

注: Eslint オプションはコード形式検証ツールです。[いいえ] を選択すると、コードは厳密モードで検証されます。

例: コメント // の後にはスペースが 1 つだけ必要です。そうでないとエラーが報告されます。

4、すべての依存関係をダウンロードしてインストールします

npmインストール

5、プロジェクトを開始します

npm 実行サーブ

vue プロジェクトのルート ディレクトリにある、index.html はプロジェクトのホームページであり、その他のファイルはプロジェクトのさまざまな設定ファイルです。

静的フォルダーは、静的リソース ファイルを格納する静的フォルダーです (Express プロジェクトのパブリックと同様)

src フォルダーは、プロジェクトのソース コードが保存されるフォルダー (Express プロジェクトの bin に似ています) であり、すべてのフロントエンド コード ファイルは src に保存されます。

ビルド フォルダーは、webpack プロジェクトによってパッケージ化された構成ファイルを保存するために使用されます。

config フォルダーには、サーバーの構成ファイルが保存されます。

src フォルダーを除き、その他のフォルダーの内容は基本的に変更する必要はありません。

vue プロジェクトを開発するには、主に src にコードを記述することです。

6. プロジェクトが完了したら、どのようにパッケージ化して公開しますか?

(1) パッケージ化: プロジェクトの開発が完了すると、コード行でコマンドが実行されます。

npm ビルドを実行する

プロジェクトをコンパイルおよびリビルドし、プロジェクト ディレクトリに dist フォルダーを生成します。

(2) リリース: dist フォルダー内のすべてのコンテンツをサーバー (IIS/node/apache) の静的フォルダーにコピーするだけです。

複数のサーバーの作成・起動方法をまとめます。

1、基本サーバー npm init はノードインデックスの開始を初期化します

2、エクスプレス プロジェクト ジェネレーター Express myProject 初期化 npm start start

3、vue1.x/2.x プロジェクト フレームワーク vue init webpack 初期化 npm run dev start

4、vue3.x プロジェクト フレームワーク vue create プロジェクト名 初期化 npm runserve start

5、反応プロジェクトフレームワークcreate-react-app my-app初期化npm start start

6、Angular Framework プロジェクトの新しいアプリ名の初期化、サービスの開始

vue3足場プロジェクト

1. @vue/cli スキャフォールディングをインストールする

npm install -g @vue/cli

インストールが完了したら、vue -V (この V は大文字) を使用してバージョン番号を表示できます。

注: @vue/cli は Webpack に依存します。使用する前に Webpack をインストールしてください。

npm install webpack -g

2. プロジェクトを作成する

vue 作成プロジェクト名

ここでのプロジェクト名はカスタムプロジェクト名で、コマンド実行後、対応するフォルダーが生成されます。

3. プロジェクトが生成されると、関連する依存関係が自動的にインストールされます。この時点で、プロジェクトを直接開始できます。

npm 実行サーブ

第 4 に、上記の手順を完了すると、vue プロジェクトはすでに開発できますが、カスタマイズされた開発ニーズには対応できません。

現時点では、ルート ディレクトリに vue.config.js を手動で作成する必要があります。

// vue.config.js

module.exports = {

  publicPath:'/',    // 启动页地址

  outputDir: 'dist', // 打包的目录

  lintOnSave: true, // 在保存时校验格式

    productionSourceMap: false, // 生产环境是否生成 SourceMap

    devServer: {

      open: true, // 启动服务后是否打开浏览器

      host: '0.0.0.0',

      port: 8080, // 服务端口

      https: false,

      hotOnly: false,

      proxy: null, // 设置代理

      before: app => {}

    },

}

5、プロジェクトが完了したら、どのようにパッケージ化してリリースするか?

(1) パッケージ化: プロジェクトの開発が完了すると、コード行でコマンドが実行されます。

npm ビルドを実行する

プロジェクトをコンパイルおよびリビルドし、プロジェクト ディレクトリに dist フォルダーを生成します。

(2) リリース: dist フォルダー内のすべてのコンテンツをサーバー (IIS / node / apache) の静的フォルダーにコピーして、ドキュメントを参照します: https://www.cnblogs.com/wisewrong/p/9740173 。 html

カプセル化を要求します (小さなデムを練習します)。

// 导入请求插件
import axios from 'axios'


// 执行ajax-get请求的函数
function getRequest(url, params){
    return new Promise(resolve=>{
        axios.get(url,{params}).then(res=>{
            resolve(res.data)
        })
    })
}

// 执行ajax-post请求的函数
function postRequest(url, params){
    return new Promise(resolve=>{
        axios.post(url,params).then(res=>{
            resolve(res.data)
        })
    })
}

// 获取商品列表
function getGoodlist(params){
    return getRequest("/myApi/goodlist", params)
}
// 登录
function doLogin(params){
    return getRequest("/myApi/login", params)
}
// 注册
function doRegister(params){
    return getRequest("/myApi/register", params)
}
// 一级分类标题
function getTypeOneList(params){
    return getRequest("/myApi/getTypeOne", params)
}

// 搜索商品
function getSearch(params){
    return getRequest("/myApi/search", params)
}

// 获取商品详情
function getDetail(params){
    return getRequest("/myApi/detail", params)
}

// 同店相似商品推荐
function getSameGoods(params){
    return getRequest("/myApi/sameList", params)
}

// 获取购物车数据
function getCartList(params){
    return getRequest("/myApi/shopList", params)
}

// 购物车商品数量增加/添加购物车
function getCartAdd(params){
    return getRequest("/myApi/add", params)
}

// 购物车商品数量减小
function getCartRemove(params){
    return getRequest("/myApi/remove", params)
}

// 删除购物车商品
function getCartDelete(params){
    return getRequest("/myApi/del", params)
}

// 获取轮播图图片地址
function getBannerUrl(params){
    return getRequest("/myApi/banner", params)
}


// 把请求数据的函数导出
export {
    doLogin,
    doRegister,
    getGoodlist,
    getBannerUrl,
    getTypeOneList,
    getSearch,
    getDetail,
    getSameGoods,
    getCartList,
    getCartAdd,
    getCartRemove,
    getCartDelete
}

リクエストインターセプター、vuex リファレンス:

Vue リクエスト インターセプターの構成 - Siege Lion Chaochao のブログ - CSDN ブログ

ルーティング設定のリファレンス:

Vue のセカンダリ ルーティング構成 - Siege Lion Chaochao のブログ - CSDN ブログ