ts+vuecli 4 재 구성 프로젝트 의 실현 을 기록 합 니 다.
예전 의 프로젝트(입사 실습 때 쓴 vuecli 2).그리고 이번 에는 수정 사항 을 추가 하려 고 합 니 다.코드 를 보 는 머리 가 크 고 충동 적 으로 재 구성 되 었 습 니 다.(자신 을 죽 이 고 싶 은 데 쓰 는 것)마침 최근 에 배 운 typescript 을 사용 하여 구축 부터 기록 을 한 걸음 한 걸음 갱신 하고 나중에 잊 어 버 릴 까 봐 다시 고 개 를 돌려 보 았 습 니 다.(참고 로 사용 하기 가 좀 어색 하지만 시원 합 니 다.vue 3.0 기대 합 니 다.)
1.프로젝트 구축:
사용 명령 vue create news 프로젝트 생 성
사용자 정의 설정,사용자 정의 설치 의존 도 를 붙 여 주세요.
ts+vuex+router 이 몇 개 는 반드시 필요 합 니 다.여기 css 는 제 가 선택 한 것 은 scss 입 니 다.unt 테스트 도 하나 하 겠 습 니 다.
그 다음 옵션 은 스스로 선택 하 세 요.
3.뒷 목록 을 만 드 는 것 은 이렇다
├── public //
├── src //
├── assets //
├── components //
├── views //
├── App.vue //
├── main.ts //
├── router.ts //
├── shims-tsx.d.ts // tsx
├── shims-vue.d.ts // Vue
└── store.ts // vuex
├── tests //
├── .eslintrc.js // eslint
├── .gitignore // git
├── babel.config.js // babel
├── postcss.config.js // postcss
├── package.json //
└── tsconfig.json // ts
├── public //
├── src //
├── api //
├── assets //
├── filters //
├── store // vuex
├── styles //
├── utils // (axios ， )
├── views //
├── App.vue //
├── main.ts //
├── router.ts //
├── shime-global.d.ts //
├── shims-tsx.d.ts // tsx
├── shims-vue.d.ts // Vue , TypeScript *.vue
├── tests //
├── .eslintrc.js // eslint
├── postcss.config.js // postcss
├── .gitignore // git
├── babel.config.js // preset
├── package.json //
├── README.md // readme
├── tsconfig.json // ts
└── vue.config.js // webpack 구체 적 으로 볼 수 있 는 홈 페이지 자체 설정:https://www.tslang.cn/docs/handbook/compiler-options.html
4.vue.config.js 초기 수정
const path = require("path");
const webpack = require('webpack');
function resolve(dir) {
return path.join(__dirname, dir)
}
const router='http://xxx.xxx.xxx'
module.exports = {
publicPath: "./", //
outputDir: 'dist', //
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: process.env.NODE_ENV === 'development',
devServer: {
port: 8080,
open: true,
proxy: {
'/test': {
target: router,
changeOrigin: true
}
}
},
configureWebpack: {
name: process.env.VUE_APP_NAME,
resolve: {
alias: {
'@': resolve('src'),
}
},
externals: {},
plugins: [],
},
}2.플러그 인과 기본 내용 충전 설치
여기 내 가 사용 하 는 element-ui,echarts,babel-poly fill,jquery 등
typescript 에서 jquery,echarts 등 플러그 인 을 사용 할 때 해당 하 는 성명 파일 을 설치 해 야 합 니 다.물론 typescripe 커 뮤 니 티 에는 이미 많은 사내 들 이 썼 습 니 다.선인 들 이 나 무 를 심 고 후세 사람들 이 더 위 를 식 혀 야 합 니 다.
성명 파일 이란 무엇 입 니까?
https://github.com/xcatliu/typescript-tutorial/blob/master/basics/declaration-files.md
성명 파일 검색 주소:microsoft.github.io/TypeSearch/
untils 폴 더(자주 사용 하 는 도구 함수,흐름 절약,떨 림 방지,localStorage 등 을 넣 을 수 있 습 니 다)
이 안에 나 는 도구 함수,date 함수,axios 의 패키지 등 을 저장 했다.
스타일 폴 더 （전역 scss 파일 저장)
이 안 에는 일부 스타일 을 초기 화 하 는 것 외 에 나 는 항상 밝 은 것 도 정의 했다.예 를 들 어 네 비게 이 션 바 의 높이,색상 등 이 편리 하 다. 고치 기 쉽다
라 우 터 폴 더(게 으 름 불 러 오기)
이 시스템 권한 같은 것 은 복잡 하지 않 고 경로 도 많 지 않 기 때문에 모듈 에 따라 도입 하지 않 고 바로 썼 다.
/* webpackChunkName: "login" */ /* ， */
{
path: '/',
name: 'login',
component: () => import(/* webpackChunkName: "login" */ '@/views/login/index.vue'),
meta: {
title:' '
keepAlive: false,
}
},
{
path: "/home",
name: "home",
redirect: "/homepage",
component: () => import(/* webpackChunkName: "home" */"@/views/Home.vue"),
children: [
{
path: "/homepage",
component: () => import(/* webpackChunkName: "homepage" */ "@/views/homepage/index.vue"),
name: "homepage",
meta: {
title: " ", keepAlive: true
}
},
]
}서로 다른 모듈 의 인터페이스 에 따라 서로 다른 파일 을 만 듭 니 다.
3.vue 의 typescript 쓰기
type:script 의 쓰기 와 vue 의 차이 가 많 지 않 습 니 다.script 의 차이 일 뿐 입 니 다.예:
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
@Component({
name: 'homepage',
components: {}
})
export class MyComponent extends Vue {
@Prop({ default: '' }) private name!: string
@Watch('name', { deep: true })
changeName(newVal,olVal){}
//data
private count:number=5
private arr:string[]=[]
mounted(){}
//methods
private test(){}
}
1.refs 가 져 오기
쓰기:
let layoutList:any = this.$refs.layout as HTMLDivElementshims-vue.d.ts 파일 에서 설명 하고 구성 요소 에서 참조 합 니 다.
declare module "*.json" {
const value: any;
export default value;
}
declare module "vue-count-to" {
const count: any;
export default count;
}
import * as myJson from '../../../public/test.json'
3.속성 계산
get age() {
return this.aTagDatasF.filter(item => item.visible)
}@Prop()private datas!: any
느낌표 는 비 null 과 비 undefined 형식 단언 이 므 로 위의 작성 방법 은 datas 라 는 속성 에 대해 비 공 단언 을 하 는 것 입 니 다.
5.vue 구성 요 소 를 도입 할 때 뒤에 추가 해 야 합 니 다. .vue
6.인터페이스 유형 을 정의 하고 앞 에 I 를 추가 합 니 다.예 를 들 어 인 터 페 이 스 는 유형 을 최대한 정의 하고 관 리 를 규범화 합 니 다.
interface IUserInfo{
name:string,
index:number
}ts 파일 안에 있 습 니 다.
export var User:IUserInfo={
name:'111',
index:996
}8.ts 검 측 을 강행
//@ts-ignore 슬롯 1:구성 요소 전환
이전 코드(부분 세 션)
개조 후:component 로 is 로 동적 판단 하 시 면 됩 니 다.
<div class="haveClick>
<component :is="echartsIndex" :obj="obj"/>
</div>이전 코드(부분 세 션):
개조 후:
// initObj key
for(let i in this.obj){
if(this.initObj(i)!=undefined){
this.initObj[i]=this.obj[i]
}
}
//
, key
// , case
optionList:[' ',' ',' ','...']
,aa index
switch (aa) {
case 0: this.getData() break;
case 1: this.avgBqzs() break;
case 2: this.areaCount() break;
case 3: this.yiqing() break;
case 4: this.avgFinish() break;
}
private optionList=[{
title:' ',
type:'getData'
},{
title:' ',
type:'avgBqzs'}
......
]
, change item ( index )
:
changeSelect(item:any){
// ts @ts-ignore
this[item.type]()}
1.코드 의 감상 성 을 높이 기 위해 for 를 사용 하지 마 십시오.
forEach 옮 겨 다 니 기,map 변환,filter 필터
2.인터페이스 조정 은 가능 한 한 async 와 await 를 사용 하여 인 터 페 이 스 를 호출 합 니 다.
예 를 들 면:
private async getData() {
const { data } = await getTransactions({})
}
public sizeTop={
id:'',
City:'',
County:'',
time:''
}
const {City,County}=this.sizeTop
private async getData() {
const { data } = await getTransactions({City,County})
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[Nest] Nest WikiDocs (4.14)라우트핸들러란 Nest.js와같은 프레임워크에서 요청을 처리하는 엔드포인트마다 동작을 수행하는 컴포넌트 (@Get등등..) 세션관리 : 세션 쿠키를 찾은후, 해당 쿠키에대한 세션상태를 조회후 요청에 세션정보를 추가해...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
