在Nuxt.js的基础上，集成以下技术栈：
- UI库：element-ui
- ajax库： axios
- css预处理器：less
- 代码格式化：prettier
- 环境变量: dotenv
# 安装依赖
yarn
# 使用mock接口进行开发
yarn mock
# 使用mock接口进行开发，且不会有登录拦截
yarn mock:nologin
# 使用后端接口进行开发
yarn dev
# 使用webpack进行生产构建
yarn build
# 生成静态站点
yarn generatesrc
├─ components 公用组件
│ ├─ copyright.vue
│ ├─ layout-head.vue
│ ├─ menu-list
│ │ ├─ src
│ │ │ └─ menu-item.vue
│ │ └─ index.vue
│ ├─ route-tab.vue
│ ├─ scrollbar
│ │ ├─ bar.js
│ │ ├─ index.js
│ │ ├─ index.less
│ │ └─ utils
│ └─ sidebar.vue
├─ const 常量文件夹
│ ├─ api.js
│ ├─ cookie-keys.js 存储的 cookie key 数组
│ ├─ filter.js 公用函数
│ ├─ meta.js meta 信息
│ ├─ path.js
│ └─ route-info.json 面包屑配置文件
├─ layouts
│ ├─ default.vue
│ └─ login.vue
├─ middleware 自定义函数，会在每个页面渲染前执行
│ ├─ auth-ssr.js
│ ├─ auth.js 路由鉴权中间件
│ └─ meta.js
├─ mixins 多组件间的公用方法
│ └─ emitter.js
├─ pages nuxt 自动生成路由
│ ├─ _.vue
│ ├─ index.vue
│ └─ login.vue
├─ plugins 应用插件，在Vue.js 初始化前运行，可在这里引入第三方类库
│ ├─ README.md
│ ├─ axios-port.js
│ ├─ axios.js
│ └─ element.js 引入了 element-ui 组件
├─ services api 请求文件夹
│ ├─ apiClient.js
│ └─ v1
│ └─ spaas-console-api.js
├─ static 静态资源目录
│ ├─ README.md
│ └─ favicon.ico
├─ store vuex 状态管理
│ └─ index.js
├─ styles 样式文件夹
│ ├─ README.md
│ ├─ export.less
│ ├─ global.less 全局混入
│ ├─ reset.less 样式重置
│ └─ var.less 样式变量，支持less变量自动引入，即不用在less中import就能直接使用变量
├─ utils 工具函数库
│ └─ utils.js
└─ views 编写页面代码的地方, 因为pages下创建 `components` 会加载出路由，所以在这里拆分路由方便就近管理原则
├─ index
│ └─ index.vue
├─ login
│ └─ index.vue
└─ main-layout
├─ components
└─ index.vue
Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置
在pages目录下新建一个名为 hello.vue 的页面
<template>
<h1>Hello world!</h1>
</template>即可在 http://localhost:3000/hello 访问到新建的页面
使用this.$axios 调用接口：
- 建议使用
$get $post $[methods]等方法，respone中会直接返回请求的body - 可以在
*.vue文件中的生命周期钩子函数中调用 - 可以在
methods里调用 - 可以在
store/*.js的actions里调用
// vue文件
export default {
mounted() {
this.$axios.$get(url)
},
methods: {
fetchData() {
this.$axios.$get(url)
}
}
}// store/index.js
export const actions = {
async fetchData({commit}, {params}) {
let resp = await this.$axios.$get(url, {params})
commit('update', resp)
}
}注意方法前有$
// GET 请求
this.$axios.$get('/users', {params: {key: value})
.then(resp => {
})
.catch(e => {})// POST 请求
this.$axios.$post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(resp => {
})
.catch(e => {})// PUT 请求
this.$axios.$put('/user/1', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(resp => {
})
.catch(e => {})// DELETE 请求
this.$axios.$delete('/user/1')
.then(resp => {
})
.catch(e => {})// 或
this.$axios({
method: 'delete',
url: '/users',
data: {
rows: [1,2],
}
})开发时，api使用的都是相对路径，通过代理来解决跨域问题。
在 nuxt.config.js 中找到 config 变量，修改 mock 设置：
env: {
mock: {
'/api': 'http://mock.api.server',
},
dev: {
'/api': 'http://real.api.server',
}
}则对于所有以 /api 开头的请求：
-
在
yarn mock模式下，都会变成http://mock.api.server/api -
在
yarn dev模式下，都会变成http://real.api.server/api
注意，每次修改代理设置，都需要重新启动应用才能生效
使用.env设置环境变量, 即在项目根目录新建一个.env文件, 填写环境变量即可。
注意，该文件不能提交至版本控制系统中。
.env文件示例:
# 左边是变量名(一般大写，下划线分割单词)，右边是变量值
# 注意=号两边不能有空格
TESTING_VAR=just-fot-testing
ANOTHER_VAR=another可以在项目的vue文件或js文件中读取
mounted() {
console.log(process.env.TESTING_VAR) // 输出 just-fot-testing
}自带的环境变量说明
| 环境变量名 | 说明 | 是否必须 | 默认值 | 示例 |
|---|---|---|---|---|
| PUBLIC_PATH | 对应webpack的publicPath，用于指定静态文件访问路径 | 是 | http://cdn.deepexi.com | |
| API_SERVER | axios的baseURL，可不传。不传时，使用相对路径发送请求 | 否 | https://www.easy-mock.com | |
| NO_LOGIN | 是否登陆拦截，传1则不会有登录拦截 | 否 | 1 | |
| COOKIE_PATH | 用于设置cookie的path，如果多个项目需要共享cookie，则应该保证项目在共同的目录下，且设置COOKIE_PATH为它们的共同目录地址 | 否 | / | /xpaas |
框架引入了 @nuxtjs/style-resources 模块，会在所有 less 文件中自动引入配置的 less 文件。相关配置在 nuxt.config.js 中，配置项 styleResources。配置后，需要使用 var.less 中的变量时，不用自己引入样式文件。
具体配置点击此处
styleResources: {
less: '~assets/var.less'
},构建会读取根目录下的.env文件获取环境变量, 默认生成的是hash路由模式的spa, 在dist目录输出静态文件
命令如下:
yarn build.env 加上
SINGLE_BUILD=1- 使用
yarn new or npm run new
view 是创建视图文件
component 生成全局组件模板
选中选项后会要求输入组件名字，确认后会在 src/compoennts 下创建输入的组件目录
关于是否是 index 这个选项，说实话，我也想不到其他好的描述方式，只能在这里描述下这个功能的作用
首先，我们写一个 view 文件，有可能只有一个页面，这时候，它就不是 index
如果我们写一个 view 文件是一个列表页，它的增加，修改需要跳转页面，则需要在同级目录下为其创建额外的路由，这时候它就是 index
参数说明
-
isIndex
- 为 true 时 主要在 pages 下创建多了一个 以 name 命名的文件夹后又为它创建了 index.vue 引入
- 为 false 时 直接为 pages 对应目录创建了 name.vue
-
choice template 现在有 default，常规模板, data-table 一个简单的 table 模板
-
choice appType
应用下拉框类型选择
1：enable（显示） 2：none（不显示） 3：disabled（显示并不可编辑） -
流程
为了流程规范化，我们采用了 git commit 规范
共用下列类型
- feat: A new feature
- fix: A bug fix
- docs: Documentation only changes
- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
- refactor: A code change that neither fixes a bug nor adds a feature
- perf: A code change that improves performance
- test: Adding missing or correcting existing tests
- chore: Changes to the build process or auxiliary tools and libraries such as documentation generation
这些规范有点不好记，但是我们引入了 cz-cli
package.json 下引入了下面的命令
"scripts": {
"commit": "npx git-cz"
}