|
|
|
|
@ -1,69 +1,81 @@
|
|
|
|
|
<!--
|
|
|
|
|
* @Author: ch
|
|
|
|
|
* @Date: 2022-05-05 15:39:29
|
|
|
|
|
* @LastEditors: ch
|
|
|
|
|
* @LastEditTime: 2022-05-06 15:04:35
|
|
|
|
|
* @Description: file content
|
|
|
|
|
-->
|
|
|
|
|
# shop-pc
|
|
|
|
|
|
|
|
|
|
## Build Setup
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
# install dependencies
|
|
|
|
|
$ npm install
|
|
|
|
|
## 环境变量配置
|
|
|
|
|
- 环境变量配置文件env.config;
|
|
|
|
|
- 输出的环境变量文件：plugins/config/env.js
|
|
|
|
|
- 修改环境变量配置后需要执行 “ node env.config " 输出的环境变量才会更新
|
|
|
|
|
``` js
|
|
|
|
|
// 直接引入输出的配置文件即可
|
|
|
|
|
import ENV from '@/plugins/config/env.js';
|
|
|
|
|
// 直接访问你在配置文件中定义的属性
|
|
|
|
|
console.log(ENV.baseUrl);
|
|
|
|
|
|
|
|
|
|
# serve with hot reload at localhost:3000
|
|
|
|
|
$ npm run dev
|
|
|
|
|
|
|
|
|
|
# build for production and launch server
|
|
|
|
|
$ npm run build
|
|
|
|
|
$ npm run start
|
|
|
|
|
|
|
|
|
|
# generate static project
|
|
|
|
|
$ npm run generate
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
|
|
|
|
|
|
|
|
|
|
## Special Directories
|
|
|
|
|
|
|
|
|
|
You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality.
|
|
|
|
|
|
|
|
|
|
### `assets`
|
|
|
|
|
|
|
|
|
|
The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.
|
|
|
|
|
|
|
|
|
|
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/assets).
|
|
|
|
|
|
|
|
|
|
### `components`
|
|
|
|
|
|
|
|
|
|
The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
|
|
|
|
|
|
|
|
|
|
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/components).
|
|
|
|
|
|
|
|
|
|
### `layouts`
|
|
|
|
|
|
|
|
|
|
Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.
|
|
|
|
|
|
|
|
|
|
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### `pages`
|
|
|
|
|
|
|
|
|
|
This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically.
|
|
|
|
|
|
|
|
|
|
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing).
|
|
|
|
|
|
|
|
|
|
### `plugins`
|
|
|
|
|
|
|
|
|
|
The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`.
|
|
|
|
|
|
|
|
|
|
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins).
|
|
|
|
|
|
|
|
|
|
### `static`
|
|
|
|
|
|
|
|
|
|
This directory contains your static files. Each file inside this directory is mapped to `/`.
|
|
|
|
|
|
|
|
|
|
Example: `/static/robots.txt` is mapped as `/robots.txt`.
|
|
|
|
|
|
|
|
|
|
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static).
|
|
|
|
|
|
|
|
|
|
### `store`
|
|
|
|
|
|
|
|
|
|
This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.
|
|
|
|
|
## 公共方法utils
|
|
|
|
|
- 公共方法统一放置utils文件夹内，可以按分类建方法文件 如：验证类verify.js 请求类request.js；
|
|
|
|
|
- 所有公共方法采用大驼峰命名法
|
|
|
|
|
- 所有的方法都从index.js输出，引入时统一引入index，不允许直接引入方法文件
|
|
|
|
|
- 所有方法文件如果导出的是多个方法，不允许在定义方法时导出，必须在文件底部一一导出，并附上方法简单的注释
|
|
|
|
|
``` js
|
|
|
|
|
// 正确
|
|
|
|
|
import {Req, IsPhone} from '@/common/utils';
|
|
|
|
|
|
|
|
|
|
// 错误
|
|
|
|
|
import {Req} from '@/common/utils/request';
|
|
|
|
|
import {IsPhone} from '@/common/utils/utils';
|
|
|
|
|
|
|
|
|
|
// 正确
|
|
|
|
|
const IsPhone = (str) => {....}
|
|
|
|
|
const IsEmail = (str) => {....}
|
|
|
|
|
export {
|
|
|
|
|
// 判断手机号
|
|
|
|
|
IsPhone,
|
|
|
|
|
// 判断邮箱
|
|
|
|
|
IsEmail
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
## 组件
|
|
|
|
|
- 根目录的components 只放置真正的组件，某个页面的业务模块应该在pages的相应目录下新建module目录放置
|
|
|
|
|
- 所有的自定义组件文件名以大驼峰命名，且在templet中使用也用大驼峰形式使用(包括页面内的模块组件)
|
|
|
|
|
|
|
|
|
|
## storage的使用
|
|
|
|
|
- 不要在页面内直接使用loaclStorage，全都放置到vuex中做一次管理
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 请求
|
|
|
|
|
- 所有请求方法命名以（Api+请求类型+具体方） 法命名
|
|
|
|
|
- 所有请求使用ToAsyncAwait 包裹
|
|
|
|
|
- 不允许使用try catch 和 then 处理返回结果
|
|
|
|
|
``` js
|
|
|
|
|
// 使用示例
|
|
|
|
|
// xxapi.js
|
|
|
|
|
import {ToAsyncAwait, ReqestTk} from '@/common/utils'
|
|
|
|
|
const ApiGetUserInfo = (parapms) => ToAsyncAwait(ReqestTk.get('xxxxUrl',{params}));
|
|
|
|
|
exprot {
|
|
|
|
|
// 获取用户信息
|
|
|
|
|
ApiGetUserInfo
|
|
|
|
|
}
|
|
|
|
|
// user.vue
|
|
|
|
|
improt {ApiGetUserInfo} from '@/common/api/xxapi.js';
|
|
|
|
|
|
|
|
|
|
const getUserInfo = async () =>{
|
|
|
|
|
const {error, result} = await ApiGetUserInfo();
|
|
|
|
|
if(error){
|
|
|
|
|
alert(error);
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
app.userInfo = result;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store).
|
|
|
|
|
```
|
|
|
|
|
## css
|
|
|
|
|
- 采用BEM命名法
|
|
|
|
|
|
ch
2 years ago