nuxt element dashboard
v2.4.3
이 저장소는 더 이상 유지 관리되지 않습니다. https://github.com/FEMessage/create-nuxt-app을 사용하세요.
Nuxt.js를 기반으로 다음 기술 스택이 통합되었습니다.
⬆맨 위로 돌아가기
# 安装依赖
yarn
# 使用mock接口进行开发
yarn mock
# 使用mock接口进行开发，且不会有登录拦截
yarn mock:nologin
# 使用后端接口进行开发
yarn dev
# 使用webpack进行生产构建
yarn build
# 生成静态站点
yarn generate⬆맨 위로 돌아가기
├── 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⬆맨 위로 돌아가기
Nuxt.js는 pages 디렉토리의 모든 *.vue 파일을 기반으로 애플리케이션의 라우팅 구성을 생성합니다.
pages 디렉터리에 hello.vue 라는 새 페이지를 만듭니다.
< template >
< h1 > Hello world! </ h1 >
</ template >http://localhost:3000/hello에서 새로 생성된 페이지에 액세스할 수 있습니다.
⬆맨 위로 돌아가기
인터페이스를 호출하려면 this.$axios 사용하세요.
$get $post $[methods] 및 기타 방법을 사용하는 것이 좋습니다. 요청 본문은 응답으로 직접 반환됩니다.*.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를 공통 디렉터리 주소로 설정해야 합니다. | 아니요 | / | /xpaas |
⬆맨 위로 돌아가기
빌드는 환경 변수를 얻기 위해 루트 디렉터리의 .env 파일을 읽습니다. 기본적으로 해시 라우팅 모드의 spa가 생성되고 dist 디렉터리에 정적 파일이 출력됩니다.
명령은 다음과 같습니다:
yarn buildMIT
⬆맨 위로 돌아가기
