この記事では、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
这几个文件夹,分别的作用
api:存放项目模拟的接口
directives:存放项目全局指令
mock:存放使用mock.js
模拟的数据
pages:存放项目相关的页面
store:存放状态管理
看完这些,其实也没啥好看的,这些都可以随便命名,你爱咋滴就咋滴,接下来就说说package.json
这是NPM用来管理项目包的文件。
打开这个文件,找到devDependencies
这个属性,我们在里面添加项目所需要的包,例如:
"axios": "^0.17.0",//请求工具
"js-cookie": "^2.2.0",//cookie
"lodash": "^4.17.4",//函数库
"mockjs": "^1.0.0",//模拟数据工具
"vuex": "^3.0.1",//状态管理工具
"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 を確認して追加します。ディレクティブ、モック、ページ、ストア
の順にこれらのフォルダーにはそれぞれの機能があります
ディレクティブ:
ストレージプロジェクトグローバルコマンドmock.js
を使用してシミュレートされたストレージデータ
devDependency
を見つけます。ここで、プロジェクトに必要なパッケージを追加します。例: 🎜淘宝ミラー
を追加します🎜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 サイトの他の関連記事を参照してください。