This repo is no longer maintained, please use https://github.com/FEMessage/create-nuxt-app
Based on Nuxt.js, the following technology stacks are integrated:
⬆Back to Top
# 安装依赖
yarn
# 使用mock接口进行开发
yarn mock
# 使用mock接口进行开发,且不会有登录拦截
yarn mock:nologin
# 使用后端接口进行开发
yarn dev
# 使用webpack进行生产构建
yarn build
# 生成静态站点
yarn generate
⬆Back to Top
├── README.md
├── doc
│ └── dev.md
├── nuxt.config.js 框架配置文件
├── package.json
├── src 开发目录
│ ├── assets 资源,包括样式文件与图片
│ │ ├── global.less 全局样式类
│ │ └── var.less 样式变量,支持less变量自动引入,即不用在less中import就能直接使用变量
│ ├── components 业务无关的可复用的组件
│ ├── const 常量文件
│ │ ├── api.js 定义api路径
│ │ ├── path.js 定义页面跳转路径
│ │ └── cookie-keys.js cookie key管理
│ ├── container 业务有关的vue组件
│ ├── layouts 可复用的页面布局
│ │ ├── default.vue
│ │ └── login.vue
│ ├── middleware 自定义函数,会在每个页面渲染前执行
│ │ └── auth.js 路由鉴权中间件
│ ├── mixins 可复用的“织入”页面的代码片断
│ ├── pages 应用视图 & 路由名称,每个文件都对应一个路由视图,开发者框无需手动维护路由文件
│ │ ├── index.vue
│ │ └── login.vue
│ ├── plugins 应用插件,在Vue.js 初始化前运行,可在这里引入第三方类库
│ │ ├── axios.js 请求拦截
│ │ └── element.js 引入element-ui
│ └── store Vuex状态管理文件
│ └── index.js
├── static 静态资源
│ ├── README.md
│ └── favicon.ico
└── yarn.lock
⬆Back to Top
Nuxt.js will generate the application's routing configuration based on all *.vue
files in the pages
directory.
Create a new page named hello.vue
in the pages
directory
< template >
< h1 > Hello world! </ h1 >
</ template >
You can access the newly created page at http://localhost:3000/hello
⬆Back to Top
Use this.$axios
to call the interface:
$get $post $[methods]
and other methods. The request body will be returned directly in response.*.vue
filemethods
actions
of store/*.js
// 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 )
}
}
⬆Back to Top
Note that there is $ before the method
// 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 ] ,
}
} )
⬆Back to Top
During development, the API uses relative paths and uses proxies to solve cross-domain problems.
Find the config
variable in nuxt.config.js
and modify the mock
settings:
env: {
mock: {
' /api ' : ' http://mock.api.server ' ,
},
dev: {
' /api ' : ' http://real.api.server ' ,
}
}
Then for all requests starting with /api
:
In yarn mock
mode, it will become http://mock.api.server/api
In yarn dev
mode, it will become http://real.api.server/api
Note that every time you modify the proxy settings, you need to restart the application to take effect.
⬆Back to Top
Use .env to set environment variables, that is, create a new .env file in the project root directory and fill in the environment variables.
Note that this file cannot be submitted to a version control system.
.env file example:
# 左边是变量名(一般大写,下划线分割单词),右边是变量值
# 注意=号两边不能有空格
TESTING_VAR=just-fot-testing
ANOTHER_VAR=another
Can be read in the project's vue file or js file
mounted ( ) {
console . log ( process . env . TESTING_VAR ) // 输出 just-fot-testing
}
The built-in environment variable description
Environment variable name | illustrate | Is it necessary | default value | Example |
---|---|---|---|---|
PUBLIC_PATH | Corresponds to webpack's publicPath, used to specify the static file access path | yes | http://cdn.deepexi.com | |
API_SERVER | The baseURL of axios does not need to be passed. When not passed, use relative paths to send requests. | no | https://www.easy-mock.com | |
NO_LOGIN | Whether to intercept login. If 1 is passed, there will be no login interception. | no | 1 | |
COOKIE_PATH | The path used to set cookies. If multiple projects need to share cookies, they should ensure that the projects are in a common directory and set COOKIE_PATH to their common directory address. | no | / | /xpaas |
⬆Back to Top
The build will read the .env file in the root directory to obtain environment variables. By default, a spa in hash routing mode is generated, and static files are output in dist
directory.
The command is as follows:
yarn build
MIT
⬆Back to Top