practise vue shop front
1.0.0
2019 ダークホース フロントエンド要素コースから学ぶコード プロジェクト。
このプロジェクトを使用する前に、まず vue.js を学習することをお勧めします。これは、要素 UI フレームワークの学習のしきい値です。すぐに成功することに熱心にならないでください
このプロジェクトをサポートするバックエンド サーバー プロジェクトのインデックス: learnVue_shop サポート サーバー API プロジェクト
このプロジェクトで使用されるバックエンド API インターフェイスは、Luo Tianyi Conservation Association が提供するパブリック バックエンド API インターフェイスです。
ダークホース フロントエンド 公式コースのアドレス:
フロントエンドプロジェクトのアドレス: http://shop.liulongbin.top/
バックエンド インターフェイス アドレス: https://www.liulongbin.top:8888/api/private/v1/
API インターフェイス ドキュメント: リンク: https://pan.baidu.com/s/1KJPfaFaPadW4JdGjCt54NQ 抽出コード: mgbr
コースの完全なセットをダウンロード: リンク: https://pan.baidu.com/s/1hBwZLR-Wbjt28YSEzVi6AQ 抽出コード: 2urn
注: リクエストを正常に送受信するには、バックエンド インターフェイス アドレスにトークンが必要です。詳細については、プロジェクト コースに従ってください。
データを無作為に削除しないでください。削除した場合は、リストに 1 つまたは 2 つ残してください。特にロール権限の部分では、すべての権限データが削除されると、この部分を実行した学生は続行できなくなります。データがない場合は、プロジェクトの Web サイトにアクセスしてデータを追加できます。
ステーション b ユーザー: Luo Tianyi Conservation Association が提供するパブリック バックエンド API インターフェイス
ユーザー名: 管理者 パスワード: 123456
羅天一保護協会のプロジェクト例のアドレス: http://gl.timemeetyou.com
インターフェースに障害が発生した場合、またはユーザーが削除された場合は、そのユーザーとプライベートにチャットしてデータベースを復元できます。
# 克隆项目
git clone https://github.com/wangxinleo/learnVue_shop.git
# 进入项目目录
cd learnVue_shop
# 安装依赖
npm install
# 本地开发 启动项目
npm run serve
# 克隆项目
git clone https://github.com/wangxinleo/learnVue_shop.git
# 进入项目目录
cd learnVue_shop
# 切换到server分支
git checkout -b server origin/server
# 拉取server分支代码
git pull
# 安装依赖
npm install
# 源码部署
node ./app.js
- src //开发目录
- asset // 存放静态文件
- css
- font
- img
- common // 公用js文件
- network // api请求文件
- goodsCom
- home
- login
- order
- report
- rightsAndRoles
- users
- request . js // 封装axios请求
- router // 动态路由
- store // Vuex
- view // 视图文件
- App . vue
- main - dev . js //用于开发环境的入口文件
- main - prod . js //用于生产环境的入口文件
- main . js // main模板文件
- . browserslistrc // 指定打包的代码对哪些浏览器支持
- . editorconfig // 代码规范
- . eslintrc . js // eslint配置文件
- babel . config . js // 插件配置
- package . json //项目信息文件
- vue . config . js //用户自定义webpack配置文件 // 以login.vue 为例
执行 login ( ) 方法
--> 到network/login下找到login请求
--> 引用 request.js 封装的axios 方法
--> 请求到数据返回到login.vue 中继续处理
--> 登陆成功なぜこのように使用するのでしょうか?たとえば、バックグラウンド API インターフェイスが一時的に変更された場合、ネットワーク フォルダー内の request.js ファイルの URL 変数を変更するだけで API インターフェイスをグローバルに変更できます。これはモジュール化の考えに沿っており、より便利です。コード管理用。また、API メソッドを再利用すると便利です。
// 加入了$bus的应用，用于跨组件通信
// main.js
Vue . prototype . $bus = new Vue ( )
// usersChildren/usersFunc/addUserDialog.vue
this . $bus . $emit ( 'freshClick' ) //很像父子之间传值的方法
// Users.vue
this . $bus . $on ( 'freshClick' , ( ) => {
console . log ( this )
this . getUsersList ( )
} )
// 父子组件通信
// 子组件代码实例
< template >
< div @ click = "open" > </ div >
< / template>
methods : {
open ( ) {
this . $emit ( 'showbox' , 'the msg' ) ; //触发showbox方法，'the msg'为向父组件传递的数据
}
}
// 父组件代码实例
< child @ showbox = "toshow" : msg = "msg" > < / child > //监听子组件触发的showbox事件,然后调用toshow方法
methods: {
toshow ( msg ) {
this . msg = msg ;
}
}ダウンロードアドレス: vscode
このツールはコードを自動的にフォーマットして整理します。vscode のインストールが完了したら、プラグイン ストアに移動して [Prettier - Code formatter] プラグインをダウンロードします。 [ファイル]-->[設定] を開きます。 --> [設定]で json を見つけます。他のプロジェクトの eslint 設定があり、このルールを置き換えたくない場合は、クリックして json 設定モードに切り替えます。 [ワークスペース]の設定ファイルにコピーしても大丈夫です。[ユーザー]の設定に置き換える必要はありません）以下のjsonを設定ファイルにコピーします
{
"[vue]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
},
"editor.quickSuggestions" : {
"strings" : true
},
"workbench.colorTheme" : " One Monokai " ,
"editor.tabSize" : 2 ,
"editor.detectIndentation" : false ,
"emmet.triggerExpansionOnTab" : true ,
"editor.formatOnSave" : true ,
"javascript.format.enable" : true ,
"stylelint.enable" : true ,
"css.validate" : false ,
"less.validate" : false ,
"scss.validate" : false ,
"stylelint.autoFixOnSave" : true ,
"git.enableSmartCommit" : true ,
"git.autofetch" : true ,
"git.confirmSync" : false ,
"[json]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
},
"liveServer.settings.donotShowInfoMsg" : true ,
"explorer.confirmDelete" : false ,
"javascript.updateImportsOnFileMove.enabled" : " always " ,
"typescript.updateImportsOnFileMove.enabled" : " always " ,
"files.exclude" : {
"**/.idea" : true
},
"editor.codeActionsOnSave" : {
"source.fixAll.eslint" : true
},
"[javascript]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
},
"[scss]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
},
"[jsonc]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
}
}このツールは、CSS、sass、less コードを自動的にフォーマットして整理し、CSS vscode の順序を自動的に並べ替えます。このプラグインの特定の JSON 設定をダウンロードするには、プラグイン ストアにアクセスする必要があります。では次のようになります
{
"stylelint.enable" : true ,
"css.validate" : false ,
"less.validate" : false ,
"scss.validate" : false ,
"stylelint.autoFixOnSave" : true
}【インポートコスト】導入した依存モジュールのサイズを確認する
[自動終了タグ] <a>を入力すると自動的に</a>タグが補完されます。
[タグの自動変更] <a>を<b>に変更すると、終了タグ</a>が</b>に自動的に変更されます。
