検索

ホームページ >バックエンド開発 >PHPチュートリアル >vueのモジュール化に基づいたバックエンドシステムの開発 - プロジェクトの構築

vueのモジュール化に基づいたバックエンドシステムの開発 - プロジェクトの構築

不言
不言オリジナル
2018-03-30 13:56:502196ブラウズ

この記事では、vue のモジュール化に基づいたバックエンド システムの開発について説明します。興味のある方は、この記事をご覧ください。

記事のディレクトリは次のとおりです:
vue のモジュール化に基づいたバックエンド システムの開発 - 準備作業
ベースon vue モジュラー開発バックエンド システム - プロジェクトの構築

はじめに

前の記事で説明した準備ツールに慣れたら、今度は独自のプロジェクトの構築を開始します。これは VUE プロジェクトなので、vue-cli を使用して構築します。次のコマンドを入力します 

vue init webpack xxxx

構築プロセス中、前述のようにコードを標準化する必要があるため、eslint の質問に対して Y と応答する必要があります。すべてが終わったら、ディレクトリ構造を見てみましょうY。等一切都结束后，我们来看看目录结构

项目目录结构

当然这个目录添加了一些，已经做了备注（加），没备注的就是一样的

├── build                      // 构建相关  
├── config                     // 配置相关
├── dist                       // 打包之后相关
├── node_modules               // npm相关包
├── src                        // 代码
│   ├── api                    // 请求接口文件(加)
│   ├── assets                 // 静态资源(图片，样式等)
│   ├── components             // 全局公用组件
│   ├── directives             // 全局指令(加)
│   ├── mock                   // 项目mock 模拟数据(加)
│   ├── pages                  // 相关页面(加)
│   ├── router                 // 路由
│   ├── store                  // store管理(加)
│   ├── App.vue                // 入口页面
│   └── main.js                // 入口 加载组件 初始化等
├── static                     // 第三方不打包资源
├── .babelrc                   // babel-loader 配置
├── .eslintignore              // eslint 忽略项
├── .eslintrc.js               // eslint 配置项
├── .postcssrc.js              // postcss 配置项
├── .gitignore                 // git 忽略项
├── index.html                 // html模板
└── package.json               // package.json

先分析下这些，如果你没有看见node_modules文件夹，暂时不用管先，接着往下看，依次添加api,directives,mock,pages,store这几个文件夹，分别的作用

  1. api：存放项目模拟的接口

  2. directives：存放项目全局指令

  3. mock:存放使用mock.js模拟的数据

  4. pages：存放项目相关的页面

  5. store：存放状态管理

看完这些，其实也没啥好看的，这些都可以随便命名，你爱咋滴就咋滴，接下来就说说package.json

package.json

这是NPM用来管理项目包的文件。
打开这个文件，找到devDependencies这个属性，我们在里面添加项目所需要的包，例如：

  1. "axios": "^0.17.0",//请求工具

  2. "js-cookie": "^2.2.0",//cookie

  3. "lodash": "^4.17.4",//函数库

  4. "mockjs": "^1.0.0",//模拟数据工具

  5. "vuex": "^3.0.1",//状态管理工具

  6. "vee-validate": "^2.0.0"//表单验证工具

如果你的这个文件已经配置好了，那么直接输入以下命令

npm install --save-dev

当你这样输入的话，你会发现下载非常非常的慢，为啥呢？因为你下载的包可能是在国外，所以呢~~我们加上淘宝镜像，如下

npm install --save-dev --registry=http://registry.npm.taobao.org

当然，如果你是一个个添加的话，我一般先查看这个包的版本，因为有时候有些包是beta版的，命令如下：

npm show 包名或者插件名称 versions --json

再然后输入下面这个命令:

npm install 包名或者插件名称@版本 --save-dev --registry=http://registry.npm.taobao.org

这时候我们只需要喝杯茶，安静的做个美男子或美少女就可以了~~当下载完成后就可以看见node_modules文件夹了

个人修改，仅供参考

完成以上步骤之后，还需要修改一下配置。

修改端口

先找到config这个目录，然后找到index.js这个文件，打开找到dev的配置项，由于默认的端口是8080，为了防止跟其它项目的端口冲突，找到port这个选项，修改成自己喜欢的端口

运行后浏览器自动打开项目

跟上面一样找到dev配置项，然后找到autoOpenBrowser，默认是false，现在改成true。

打包后加载资源问题

由于在打包后，出现图片和样式不出来的问题，不知道你们是否也这样，进行了以下修改：

config这个目录下找到index.js这个文件，打开找到build的配置项，添加assetsPublicPath: './'

然后在build目录下找到utils.js这个文件，然后找到以下代码：

return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
  })

在配置项中添加publicPath: '../../'

プロジェクトのディレクトリ構造

もちろん、このディレクトリにはいくつかの追加が行われており、メモ (added) が作成されています。注のないものは同じです

rrreee

まずはこれらを分析しましょう。node_modules フォルダーが表示されない場合は、今は気にしないでください。次に、api を確認して追加します。ディレクティブ、モック、ページ、ストア の順にこれらのフォルダーにはそれぞれの機能があります

  1. api:
    ストレージ プロジェクト シミュレーション インターフェイス

  2. ディレクティブ:

    ストレージプロジェクトグローバルコマンド

  3. mock:mock.jsを使用してシミュレートされたストレージデータ

  4. pages : ストレージ プロジェクト関連のページ

  5. ストア: ストレージ ステータス管理🎜
🎜 これらを読んでも、実際には興味深いものは何もありません。これらの名前は何でも構いません。 package.json について話しましょう🎜🎜package.json🎜🎜これは、プロジェクト パッケージを管理するために NPM によって使用されるファイルです。 🎜このファイルを開き、属性 devDependency を見つけます。ここで、プロジェクトに必要なパッケージを追加します。例: 🎜
  1. 🎜"axios" : "^0.17.0",//リクエストツール🎜
  2. 🎜"js-cookie": "^2.2.0",//Cookie🎜
  3. 🎜"lodash": " ^4.17.4",//関数ライブラリ🎜
  4. 🎜"mockjs": "^1.0.0",//シミュレーションデータツール🎜
  5. 🎜"vuex": " ^ 3.0.1",//ステータス管理ツール🎜
  6. 🎜"vee-validate": "^2.0.0"//フォーム検証ツール🎜
🎜これでファイルが設定されましたので、次のコマンドを直接入力してください🎜rrreee🎜 このように入力すると、ダウンロードが非常に遅いことがわかります。なぜでしょうか。ダウンロードしたパッケージが海外からのものである可能性があるため、~~ 以下のように 淘宝ミラー を追加します🎜rrreee🎜 もちろん、1つずつ追加する場合、通常は最初にパッケージのバージョンを確認します。一部のパッケージはベータ版である場合があるため、コマンドは次のとおりです: 🎜rrreee🎜 次に、次のコマンドを入力します: 🎜rrreee🎜 この時点では、一杯のお茶を飲んで、静かにハンサムな男性または美しい女の子になるだけで十分です~~ その後ダウンロードが完了すると、node_modules フォルダーが表示されます 🎜🎜🎜個人的な変更、参照のみ🎜🎜🎜 上記の手順を完了した後も、設定を変更する必要があります。 🎜🎜🎜ポートを変更します🎜🎜🎜まず、ディレクトリconfigを見つけて、次にファイルindex.jsを見つけて、devにある構成アイテムを開きます>、デフォルトのポートは 8080 なので、他のプロジェクトとのポートの競合を防ぐために、オプション port を見つけて、お気に入りのポートに変更します🎜🎜🎜 Project の実行後に自動的に開きます🎜🎜🎜 上記のように dev 構成項目を見つけて、autoOpenBrowser を見つけます。デフォルトは false です。 true コード>。 🎜🎜🎜パッケージ化後のリソースの読み込みの問題🎜🎜🎜パッケージ化後に画像とスタイルが表示されない問題のため、あなたも同じ問題を抱えているかどうかわかりませんので、次の変更を加えました: 🎜🎜configこのディレクトリ内の ファイル index.js を見つけ、build にある構成アイテムを開き、assetsPublicPath: './' を追加します。 🎜🎜 そして、build で、 ディレクトリでファイル utils.js を見つけて、次のコードを見つけます: 🎜rrreee🎜 publicPath: '../ を追加します。設定項目の ../' 🎜🎜🎜概要🎜🎜🎜 この部分は、とりあえず無視していただいても構いませんので、同じ問題が発生した場合にもう一度見てください。プロジェクトの建設に支障をきたすことはありません。ビルドが完了したら、コーディングを開始しましょう。 🎜🎜🎜記事🎜🎜vueのモジュール化に基づいたバックエンドシステムの開発 - 準備作業🎜vueのモジュール化に基づいたバックエンドシステムの開発 - プロジェクトの構築🎜🎜関連する推奨事項: 🎜🎜🎜vue2.0 axioscrossで注意すべきこと-ドメインとレンダリング?🎜🎜🎜🎜モバイル側で慣性スライドとリバウンドVueナビゲーションバーを実装する方法🎜🎜🎜🎜vueプロジェクトがパッケージ化された後のリフレッシュ404に対処する方法🎜🎜

以上がvueのモジュール化に基づいたバックエンドシステムの開発 - プロジェクトの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

json npm 表单验证 Cookie 接口 JS
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：PHP は正方学務システムへの模擬ログインを実装します次の記事：PHP は正方学務システムへの模擬ログインを実装します

関連記事

続きを見る