nuxt element dashboard
v2.4.3
Este repositorio ya no se mantiene, utilice https://github.com/FEMessage/create-nuxt-app
Basado en Nuxt.js, se integran las siguientes pilas de tecnología:
⬆Volver al inicio
# 安装依赖
yarn
# 使用mock接口进行开发
yarn mock
# 使用mock接口进行开发，且不会有登录拦截
yarn mock:nologin
# 使用后端接口进行开发
yarn dev
# 使用webpack进行生产构建
yarn build
# 生成静态站点
yarn generate⬆Volver al inicio
├── 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⬆Volver al inicio
Nuxt.js generará la configuración de enrutamiento de la aplicación en función de todos los archivos *.vue en el directorio pages .
Cree una nueva página llamada hello.vue en el directorio pages
< template >
< h1 > Hello world! </ h1 >
</ template >Puede acceder a la página recién creada en http://localhost:3000/hello
⬆Volver al inicio
Utilice this.$axios para llamar a la interfaz:
$get $post $[methods] y otros métodos. El cuerpo de la respuesta devolverá directamente el cuerpo solicitado.*.vuemethodsactions de 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 )
}
}⬆Volver al inicio
Tenga en cuenta que hay $ antes del método.
// 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 ] ,
}
} )⬆Volver al inicio
Durante el desarrollo, la API utiliza rutas relativas y servidores proxy para resolver problemas entre dominios.
Busque la variable config en nuxt.config.js y modifique la configuración mock :
env: {
mock: {
' /api ' : ' http://mock.api.server ' ,
},
dev: {
' /api ' : ' http://real.api.server ' ,
}
} Luego, para todas las solicitudes que comiencen con /api :
En modo yarn mock , se convertirá en http://mock.api.server/api
En el modo yarn dev , se convertirá en http://real.api.server/api
Tenga en cuenta que cada vez que modifica la configuración del proxy, debe reiniciar la aplicación para que surta efecto.
⬆Volver al inicio
Utilice .env para configurar variables de entorno, es decir, cree un nuevo archivo .env en el directorio raíz del proyecto y complete las variables de entorno.
Tenga en cuenta que este archivo no se puede enviar a un sistema de control de versiones.
Ejemplo de archivo .env:
# 左边是变量名(一般大写，下划线分割单词)，右边是变量值
# 注意=号两边不能有空格
TESTING_VAR=just-fot-testing
ANOTHER_VAR=anotherSe puede leer en el archivo vue o js del proyecto.
mounted ( ) {
console . log ( process . env . TESTING_VAR ) // 输出 just-fot-testing
}La descripción de la variable de entorno integrada.
| Nombre de la variable de entorno | ilustrar | ¿Es necesario? | valor predeterminado | Ejemplo |
|---|---|---|---|---|
| RUTA_PÚBLICA | Corresponde a publicPath del paquete web, que se utiliza para especificar la ruta de acceso al archivo estático. | Sí | http://cdn.deepexi.com | |
| API_SERVIDOR | No es necesario pasar la URL base de axios. Cuando no se apruebe, utilice rutas relativas para enviar solicitudes. | No | https://www.easy-mock.com | |
| NO_INICIAR SESIÓN | Ya sea para interceptar el inicio de sesión. Si se pasa 1, no habrá intercepción de inicio de sesión. | No | 1 | |
| RUTA_COOKIE | La ruta utilizada para configurar las cookies. Si varios proyectos necesitan compartir cookies, deben asegurarse de que los proyectos estén en un directorio común y configurar COOKIE_PATH en su dirección de directorio común. | No | / | /xpaas |
⬆Volver al inicio
La compilación leerá el archivo .env en el directorio raíz para obtener variables de entorno. De forma predeterminada, se genera un spa en modo de enrutamiento hash y los archivos estáticos se generan en dist .
El comando es el siguiente:
yarn buildMIT
⬆Volver al inicio
