[vue.js#1] 구축 환경에서 개발 전까지

개시하다

한 페이지 앱을 만들어 보고 싶어서요.js 환경 제작 시 참고로 남겨두세요.
겸사겸사 말씀드리겠습니다.js를 선택한 이유는vue,react,angular에서 일본어 문서가 충실해서 시작하기 쉬운 것 같아요!

angular > react > vue 순서대로 공부하는 것은 매우 어렵다고 한다.vue > angular > react순으로 일본어 문서를 채웠다.

전제 조건

npm에서 사용할 수 있는 환경을 준비해야 합니다.(나는 이미 다 했으니 사랑을 끊을 것이다.)

vue.js 환경 구축 프로그램

설치

npm 명령을 사용하여 vue-cli 패키지 설치

$ npm install -g vue-cli~

완성

프로젝트 작성

퍼스트 블루라는 프로젝트를 만들어 보세요.
사업명, 설명, 저자 등을 묻겠지만 Enter로 앞으로 밀어붙이는 것도 문제없다.

$ vue init webpack first-vue

index.서류를 찾다

항목 아래로 직접 이동하면 디렉터리가 존재하는지 확인할 수 있습니다!
index.파일도 프로젝트의 바로 아래에 설정되어 있습니다.

$ cd first-vue 
$ ll
total 100
drwxr-xr-x    8 root    root     4096 Jan 18 21:24 ./
drwxrwxr-x    3 vagrant vagrant  4096 Jan 18 21:24 ../
-rw-r--r--    1 root    root      402 Jan 18 21:24 .babelrc
drwxr-xr-x    2 root    root     4096 Jan 18 21:24 build/
drwxr-xr-x    2 root    root     4096 Jan 18 21:24 config/
-rw-r--r--    1 root    root      147 Jan 18 21:24 .editorconfig
-rw-r--r--    1 root    root       51 Jan 18 21:24 .eslintignore
-rw-r--r--    1 root    root      791 Jan 18 21:24 .eslintrc.js
-rw-r--r--    1 root    root      213 Jan 18 21:24 .gitignore
-rw-r--r--    1 root    root      271 Jan 18 21:24 index.html
drwxr-xr-x 1026 root    root    36864 Jan 18 21:25 node_modules/
-rw-r--r--    1 root    root     2695 Jan 18 21:24 package.json
-rw-r--r--    1 root    root      246 Jan 18 21:24 .postcssrc.js
-rw-r--r--    1 root    root      552 Jan 18 21:24 README.md
drwxr-xr-x    5 root    root     4096 Jan 18 21:24 src/
drwxr-xr-x    2 root    root     4096 Jan 18 21:24 static/
drwxr-xr-x    4 root    root     4096 Jan 18 21:24 test/

index.>의 내용

index.''''있으니까 열어봐.

$ vim index.html

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>first-vue</title>
   </head>
   <body>
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
 </html>

<script> 탭이 없고 자바스크립트를 읽지 않았습니다...

build을 만듭니다.

$ npm run dev

index.).

$ vim ./dist/index.html

-------
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>first-vue</title><link href=/static/css/app.30790115300ab27614ce176899523b62.css
rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/static/js/vendor.4a04c5bd29b0304c7
bd7.js></script><script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js></script></body></html>
-------

build이면dist/index.파일이 ''(으)로 만들어졌습니다.
./dist/index.탭이 포함된 ""./dist/index.html을 엽니다.

<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>first-vue</title><link href=/static/css/app.30790115300ab27614ce176899523b62.css
rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/static/js/vendor.4a04c5bd29b0304c7
bd7.js></script><script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js></script></body></html>

이것은vue입니다.핵심 index.서류인 것 같은데.

표 화면도 확인할 수 있다.

일단 여기까지, 개발에 들어가자!

항목 바로 아래의 index입니다.이따가 서류 보충의 역할 등.
vue.공식 사이트

https://jp.vuejs.org/v2/guide/installation.html

Reference

이 문제에 관하여([vue.js#1] 구축 환경에서 개발 전까지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/soft-drink/items/a2f92e639da00ca807fd

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다