Vue 에서 vue-cli 를 사용 하여 프로젝트 만 들 기
vue-cli 는 vue JS 프로젝트 비계 공식 발표:https://github.com/vuejs/vue-cli
내 가 만 든 템 플 릿 항목:https://github.com/Aleczhang1992/my-vue-project/tree/dev
절차
1.Node.js(>=4.x,6.x preferred)와 Git 을 설치 해 야 한다.
cnpm 를 설정 하면 패키지 다운로드 속 도 를 높 일 수 있 습 니 다.
npm install -g cnpm --registry=https://registry.npm.taobao.org
sudo npm install -g vue-cli명령 형식:vue init
그 중에서 template-name 은 선택 할 수 있 는 템 플 릿 항목 이 고 procject-name 은 프로젝트 를 만 드 는 이름 입 니 다.현재 몇 가 지 를 제공 합 니 다.
원 격 위탁 관리 창고 나 로 컬 에서 도 사용자 정의 템 플 릿 을 사용 할 수 있 습 니 다.
웹 팩 템 플 릿 항목 선택:https://github.com/vuejs-templates/webpack
2.MintUI 프레임 워 크 사용
1.완전 도입
main.js 에 다음 내용 을 기록 합 니 다:
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'
Vue.use(MintUI)
new Vue({
el: '#app',
render: h => h(App)
})2.필요 에 따라 도입
babel-plugin-component 설치:
npm install babel-plugin-component -D
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import App from './App.vue'
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/*
* Vue.use(Button)
* Vue.use(Cell)
*/
new Vue({
el: '#app',
render: h => h(App)
})1.로 컬 개발 상태 에서 프로젝트 를 시작 할 때 코드 가 비어 있 고 번호 가 잘못된 문제 가 자주 발생 합 니 다.원인:프로젝트 를 만 들 때 eslint 문법 검 사 를 선택 하 였 습 니 다.
2.스타일 보고서 오류 문 제 를 도입 합 니 다.babel 은 css 파일 을 컴 파일 할 수 없습니다.
Module not found: Error: Cannot resolve module 'mint-ui/style.css'
3.또한 도 입 된 구성 요 소 는 사용자 정의 구성 요소 에 등록 하고 구성 요소 에 포 함 된 구성 요소 도 참조 하고 등록 해 야 합 니 다.
4.비 렌 더 링 dom 구성 요 소 는 템 플 릿 에 쓸 필요 도 없고 등록 할 필요 도 없 으 며 직접 호출 할 수 있 습 니 다.예 를 들 어 load 의 Indicator.
3.vue-router 의 사용
github 주소:https://github.com/vuejs/vue-router
입구 파일 main.js 에 도입
import VueRouter from 'vue-router';
Vue.use(VueRouter);
// router
const router = new VueRouter({
mode: 'history',
routes: routes
});4.vuex 를 사용 하여 상태 관리
vue 상태 관리 도구 vuex
vuex 각 부분의 개념 을 간단하게 소개 하 겠 습 니 다.
vuex 를 사용 하려 면 Vue.use 에 도입 한 다음 에 Vuex.Store 대상 을 예화 하면 됩 니 다.대상 에서 state,actions,mutations,getters 등 내용 을 정의 해 야 합 니 다.이렇게 하면 전체적인 상태 관리 체 제 를 구축 할 수 있 고 응용 상단 에서 데 이 터 를 처리 할 수 있 습 니 다.각 구성 요소 에서 데 이 터 를 조작 하 는 것 도 이 벤트 를 통 해 Vuex 에 직접 전달 하여 데이터 업 데 이 트 를 할 수 있 습 니 다.그리고 같은 데 이 터 를 사용 하 는 다른 구성 요소 에 응답 하여 보기 업 데 이 트 를 진행 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Vue.js】Xserver에 Vue CLI로 만든 초간이 페이지를 배포해 보았다.Vue CLI를 사용한 포트폴리오 제작은 처음이었기 때문에, 일단 제작에 착수하기 전에 배포가 가능한지 시도해 보았습니다. (모처럼 만들었는데 배포할 수 없다니 된다면 너무 슬프니까...웃음) 결론, 비교적 간단하게...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
