웹 팩+vue+node 단일 페이지 만 들 기(입문 편)

2430 단어 webpackvuenode
1.node 다운로드 주소:http://nodejs.cn/download/,설치 완료 검사 node 와 npm 버 전

2.타 오 바 오 미 러:npm install cnpm-g--registry=https://registry.npm.taobao.org 타 오 바 오 미 러 는 npm 보다 훨씬 빨 라 서 npm 대신 cnpm 를 사용 할 수 있 습 니 다.

vue-cli:cnpm install-g vue-cli 설치
웹 팩 설치:cnpm install-g webpack
-g 전역 설치 표시
프로 그래 밍 과정 에서 모듈 을 도입 해 야 한다 면 cnpm install--save
예 를 들 어 vue-router 경로 모듈 을 설치 하고 비계 cnpm install vue-router-save 를 직접 사용 하면 됩 니 다.


4.webpack 을 구축 하 는 vue 응용 프로그램:vue init webpack

여기 서 특별히 웹 팩 을 언급 합 니 다.앞에서 웹 팩 템 플 릿 을 설치 할 때 ESLint 를 사용 하여 코드 를 규범화 할 지 여 부 를 선택 하 십시오.
ESLint 는 평소 코드 들 여 쓰기 에 신경 을 쓰 지 않 는 친구 에 게 비보 일 수 있 습 니 다.프로그램 코드 를 조금 만 수정 하면 들 여 쓰기 가 규범 에 맞지 않 으 면 빈 칸 에 도 개 떡 같은 오류 가 발생 할 수 있 습 니 다.
vue-cli 템 플 릿 을 표시 합 니 다.vue-cli 템 플 릿 은 공식 템 플 릿,사용자 정의 템 플 릿,로 컬 템 플 릿 으로 나 뉜 다.
공식 템 플 릿 은
  •  browserify  --  고급 기능 을 가 진 Browserify+vueify 는 정식 개발 에 사 용 됩 니 다
  •  browserify-simple  --  기본 기능 을 가 진 Browserify+vueify 는 빠 른 개발 에 사 용 됩 니 다
  •  simple  --  단일 HTML,가장 간단 한 Vue.js 응용 프로그램 개발
  •  webpack  --  고급 기능 을 가 진 웹 팩+vue-loader 는 정식 개발
  • 에 사용 된다.
  •  webpack-simple  --  기본 기능 을 가 진 웹 팩+vue-loader 는 빠 른 개발 에 사용 된다
  • 5.비계 설치 의존

    6.직접 실행 해 보기 효과


    PS:자신 이 demo 를 써 서 경로,경로 내장,하위 경로,원 격 크로스 필드 에서 데 이 터 를 얻 고 boottstrap 등 기능 을 결합 시 켰 습 니 다.
    코드 가 제 github 에 올 라 왔 습 니 다.주소:https://github.com/LeonardLmyt/learngit/tree/master/vue-single-page

    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

    좋은 웹페이지 즐겨찾기