nuxt element dashboard
v2.4.3
Este repositório não é mais mantido, use https://github.com/FEMessage/create-nuxt-app
Com base no Nuxt.js, as seguintes pilhas de tecnologia são integradas:
⬆Voltar ao topo
# 安装依赖
yarn
# 使用mock接口进行开发
yarn mock
# 使用mock接口进行开发，且不会有登录拦截
yarn mock:nologin
# 使用后端接口进行开发
yarn dev
# 使用webpack进行生产构建
yarn build
# 生成静态站点
yarn generate⬆Voltar ao topo
├── 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⬆Voltar ao topo
Nuxt.js irá gerar a configuração de roteamento do aplicativo com base em todos os arquivos *.vue no diretório pages .
Crie uma nova página chamada hello.vue no diretório pages
< template >
< h1 > Hello world! </ h1 >
</ template >Você pode acessar a página recém-criada em http://localhost:3000/hello
⬆Voltar ao topo
Use this.$axios para chamar a interface:
$get $post $[methods] e outros métodos. O corpo da resposta retornará diretamente o corpo 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 )
}
}⬆Voltar ao topo
Observe que existe $ antes do 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 ] ,
}
} )⬆Voltar ao topo
Durante o desenvolvimento, a API usa caminhos relativos e proxies para resolver problemas entre domínios.
Encontre a variável config em nuxt.config.js e modifique as configurações mock :
env: {
mock: {
' /api ' : ' http://mock.api.server ' ,
},
dev: {
' /api ' : ' http://real.api.server ' ,
}
} Então, para todas as solicitações começando com /api :
No modo yarn mock , ele se tornará http://mock.api.server/api
No modo yarn dev , ele se tornará http://real.api.server/api
Observe que toda vez que você modifica as configurações de proxy, é necessário reiniciar o aplicativo para que tenha efeito.
⬆Voltar ao topo
Use .env para definir variáveis de ambiente, ou seja, crie um novo arquivo .env no diretório raiz do projeto e preencha as variáveis de ambiente.
Observe que este arquivo não pode ser enviado a um sistema de controle de versão.
Exemplo de arquivo .env:
# 左边是变量名(一般大写，下划线分割单词)，右边是变量值
# 注意=号两边不能有空格
TESTING_VAR=just-fot-testing
ANOTHER_VAR=anotherPode ser lido no arquivo vue ou arquivo js do projeto
mounted ( ) {
console . log ( process . env . TESTING_VAR ) // 输出 just-fot-testing
}A descrição da variável de ambiente integrada
| Nome da variável de ambiente | ilustrar | É necessário | valor padrão | Exemplo |
|---|---|---|---|---|
| PUBLIC_PATH | Corresponde ao publicPath do webpack, usado para especificar o caminho de acesso ao arquivo estático | sim | http://cdn.deepexi.com | |
| API_SERVER | O baseURL do axios não precisa ser passado. Quando não aprovado, use caminhos relativos para enviar solicitações. | não | https://www.easy-mock.com | |
| NO_LOGIN | Se deve interceptar o login. Se 1 for passado, não haverá interceptação de login. | não | 1 | |
| COOKIE_PATH | O caminho usado para definir cookies. Se vários projetos precisarem compartilhar cookies, eles deverão garantir que os projetos estejam em um diretório comum e definir COOKIE_PATH como seu endereço de diretório comum. | não | / | /xpaas |
⬆Voltar ao topo
A compilação lerá o arquivo .env no diretório raiz para obter variáveis de ambiente. Por padrão, um spa no modo de roteamento hash é gerado e os arquivos estáticos são gerados no diretório dist .
O comando é o seguinte:
yarn buildMIT
⬆Voltar ao topo
