- 이동은 당신의 작업 디렉토리 (작업 디렉토리 아래에있을 것입니다 새 프로젝트) 터미널을 열고
- 글로벌 VUE-CLI를 설치
NPM 설치 VUE-CLI -g
- 보기 버전
VUE -V
- 기반 웹팩 안녕하세요 프로젝트 VUE의 이름을 구축
VUE 초기화 웹팩 안녕하세요
- 프롬프트
명령 초기화가 필요 VUE 글로벌 설치할 부가 기능을. 실을 실행하십시오 글로벌 @ VUE / CLI-초기화를 추가하고 시도 다시.
- 설치 @ VUE / CLI-초기화
NPM 내가 -g @ VUE / CLI-초기화
- 진행중인 프로젝트를 계속
VUE 초기화 웹팩 안녕하세요
- 프롬프트
프로젝트 이름 : 프로젝트 이름 (캐리지 리턴)을 만들려면
프로젝트 설명 : 프로젝트 (입력)
저자 : 저자
다음은 직접 입력
(Y), 라우팅 구성 요소는 프로젝트를 수행하는, VUE를 설치 한 후, 우리는 설치해야합니다 VUE 라우터 설치
ESLint 코드 탐지 모듈을 사용할 필요 (Y) : ESLint를 사용하여 코드를 보풀하기
단위 테스트를 설정 : 자동화 된 단위 테스트의 필요성 (y)를
테스트 러너 :( 캐리지 리턴을 선택)
Nightwatch로 설정 E2E 테스트 : 테스트 (Y)의 끝을 설치할지 여부를
프로젝트가 생성 (권장) 한 후에 우리가 당신을 위해`NPM의 install '이다 실행해야합니까 :? 후속 설치 패키지에서 것은 NPM은 (예, 입력)를 설치 설치 여부에 따라 달라집니다
- 완전한
-
프로젝트 디렉토리
build：项目webpack配置文件
config：针对开发环境和线上环境的配置文件
node_modules：项目依赖包
src：源代码目录
static：静态资源
.babelrc：JavaScript 语法的编译器
.editorconfig：针对babel的编译，浏览器配置
.eslintignore：针对babel的编译，eslint检测规则配置
.eslintrc.js：针对babel的编译，eslint检测规则配置
.gitignore：git 配置文件
.postcssrc.js：转换成css格式的插件
index.html：整个项目的入口index页，包含根实例的挂载点
package.json：定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）
package-lock.json：其实package-lock就是锁定安装时的包版本号，需要上传到git上，以保证其他人在install时候，大家的依赖版本相同 -
src目录下文件介绍
main.js:整个项目入口文件el：#app
创建了一个vue的实例app让其挂载在index.html的id=app的节点上
components: { App }
注册局部组件APP，APP来源：import App from './App'，即引入当前目录下的APP.vue组件
template: '<App/>'
定义模板为APP组件的内容
即，main中创建vue实例展示的就是APP.vue组件中的内容APP.vue：单文件组件，包含三部分
第一部分：<template>模板部分
第二部分：<script>逻辑部分
第三部分：<style>样式部分