IDE 선택 vscode
***************************
***************************
설치 nodejs : https://nodejs.org/en/ LTS 버전을 다운로드하고 설치하는 공식 웹 사이트, 현재 버전 12.14.0
다음과 같이 설치 후 시험은 다음과 같습니다 :
설치가 성공적으로 nodejs했다
***************************
***************************
구성 NPM 국내 출처 :
npm config set registry https://registry.npm.taobao.org
구성이 성공 여부를 테스트하려면 :
npm config get registry
설치 VUE 및 사용 발판 :
npm install webpack -g
npm install -g @vue/cli설치가 성공 여부를 명령 라인 입력 VUE 시험 :
***************************
***************************
프로젝트 VUE를 구축 할 준비가 적당한 폴더를 찾을 수 있습니다. 우리의 첫 번째 프로젝트 준비 hello_zt 이름. 이 폴더에서 다음 명령을 입력합니다 :
vue create hello_zt
(提一句,vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档网页链接。可能有的小伙伴会看到有vue init webpack hellO_zt这种写法。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置))표시 다음과 같은 정보는 :
우리는 Enter 키를 누릅니다, 기본을 선택했다. 잠시 기다린 OK 그것을 :
시도 서비스를 시작 프롬프트에 따라 :
당신은 아첨, 열 수 있습니다.
***************************
***************************
엔지니어링 vscode에서 열기 바로보기 :
App.vue 열기, 오른쪽 아래는 Vetur 플러그를 설치하는 것이 좋습니다.
이 신택스 하이라이팅 에러 및 다른 일반적인 기능을 포함한다.
거의 개발하기로 결정 됐어요 vue표준 프로젝트를하고, vscode강하게 당신이 그것을 설치하는 것이 좋습니다 것입니다 :
************************************
************************************
다른 플러그인을 설치합니다 :
*****************************
실:
얀은 무엇입니까 :
페이스 북의 원사 패키지 관리 도구를 해제됩니다.
자원 활용의 최대 병렬로 작동 할 수 있습니다 각 패킷은 다시 다운로드하지 않고, 다운로드 캐시됩니다.
다른 시스템에서 동일한 방식으로 실행 시스템 설치 과정에서 실행하기 위해, 종속성을 설치하는 형식으로 설명하고 간결한의 잠금 파일 파일과 결정 론적 알고리즘을 사용합니다.
이 실행되기 전에 설치 패키지의 무결성을 확인합니다.
설치 명령
npm install -g yarn우리는이 예뻐를 설치 취득 코드 형식으로 정렬을한다.
그냥 몇 공백을 추가하려고하자 :
Vscode 리콜 단자 (단축키 CTRL + 시프트 + Y) :
다음 명령을 입력 :
yarn lint발견 ................ 관찰 아래에있는 공백을 제거하지 제거 T_T 것
这是因为缺省的vue-cli没有为我们安装@vue/prettier插件，我们在终端手工安装一下：
yarn add -D @vue/eslint-config-prettier然后在package.json中加上相应配置:
再次运行yarn lint命令试试:
尴尬报错。。。。。。继续安装缺失的插件:
yarn add eslint-plugin-vue (为当前项目安装eslint-plugin-vue )
(也可以用yarn global add eslint-plugin-vue去全局安装,可用yarn global bin命令查看yarn bin文件夹路径,并将该路径设置为系统变量)继续在vscode的终端下输入yarn lint , 查看效果:
可以看到。。空格没啦！！美滋滋！不过。。单引号也都变成双引号了。。。嘛，设置一下lint格式~
根目录下新建一个.prettierrc.js文件,并在其中建入以下内容:
module.exports = {
semi: false, //每行代码结尾的分号
singleQuote: true //单引号
}
再次运行yarn lint , 可以看到，都是单引号！没空格！没分号！如果以后接手别人乱七八糟的项目,一个yarn lint就可以变整齐啦~
**************************************************
**************************************************
eslint:
什么是eslint:
它是一个插件化并且可配置的JavaScript语法规则和代码风格的检查工具,说白了就是让你代码写的好看点,格式不会太乱。
在vscode的应用商店里搜索eslint,并安装:
我们随便加点空格试试：
提示很明显。这样基本的环境就搭成了，可以撸起袖子敲代码啦
