vue.js에서 프로젝트를 실행하는 방법
- 青灯夜游원래의
- 2020-12-21 16:49:176977검색
프로젝트 실행 방법: 1. node 및 cnpm을 설치합니다. 2. vue-cli를 설치합니다. 3. 프로젝트를 초기화합니다. 4. cd 명령을 사용하여 프로젝트 폴더에 들어가고 "cnpm install" 명령을 사용하여 종속 항목을 설치합니다. 5. "npm run dev" 명령을 사용하면 프로젝트가 실행됩니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, vue2.9 버전, 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.
관련 추천: "vue.js Tutorial"
vue.js를 막 시작한 많은 사람들은 처음에는 GitHub에서 오픈 소스 프로젝트를 선택하지만 오픈 소스를 실행하는 방법을 모른다는 것을 알게 됩니다. 매우 당황스러운 GitHub 프로젝트. 온라인 튜토리얼을 참고하여 프로젝트 환경을 성공적으로 구축하고 프론트 엔드 엔지니어링에 대한 막연한 이해를 얻었으므로 환경 구축 과정을 여러분과 공유하겠습니다.
먼저 필요한 것을 나열하세요.
node.js 환경(npm 패키지 관리자)
vue-cli 스캐폴딩 구성 도구
cnpm npm Taobao 미러
노드 .js 설치
node.js 공식 웹사이트에서 node를 다운로드하고 설치하세요. 설치 과정은 매우 간단합니다. "다음 단계"만 거치면 됩니다(어리석은 설치).
설치가 완료된 후 아래와 같이 명령줄 도구를 열고 node -v를 입력하면 해당 버전 번호가 나타나면 설치가 성공한 것입니다.
npm 패키지 관리자는 노드에 통합되어 있어 npm -v를 직접 입력하면 아래와 같이 npm 버전 정보가 표시됩니다.
알겠습니다! 노드 환경이 설치되었으며, npm 패키지 관리자도 사용 가능합니다. 일부 npm 리소스가 차단되었거나 외부 리소스이기 때문에 npm을 사용하여 종속성 패키지를 설치할 때 종종 실패하므로 npm의 국내 미러---cnpm도 필요합니다.
cnpm 설치
명령줄에
npm install -g cnpm --registry=http://registry.npm.taobao.org
를 입력하고 기다리면 아래와 같이 설치가 완료됩니다.
완료 후 npm 대신 cnpm을 사용하여 종속성 패키지를 설치할 수 있습니다. cnpm에 대해 더 자세히 알고 싶다면 Taobao npm 미러 공식 웹사이트를 확인하세요.
vue-cli 스캐폴딩 빌드 도구를 설치합니다.
명령줄에서
cnpm install -g vue-cli
명령을 실행하고 설치가 완료될 때까지 기다립니다. (여기서는 npm 대신 cnpm을 사용합니다. 그렇지 않으면 속도가 매우 느려지고 멈추게 됩니다.)
위의 세 단계를 통해 준비해야 할 환경과 도구가 준비되면 vue 사용을 시작하겠습니다. -cli 프로젝트를 빌드합니다.
vue-cli를 사용하여 프로젝트 빌드
프로젝트를 생성하려면 먼저 디렉터리를 선택한 다음 명령줄에서 해당 디렉터리를 선택한 디렉터리로 변경해야 합니다. 여기서는 새 프로젝트를 저장할 데스크탑을 선택한 다음 아래와 같이 먼저 데스크탑에 디렉터리를 cd해야 합니다.
데스크톱 디렉터리에서 명령줄에 있는 명령을 실행하세요
vue init webpack firstVue
이 명령을 설명하세요. 이 명령은 webpack이 빌드 도구인 프로젝트를 초기화하는 것을 의미합니다. 웹팩. 그 중 firstVue는 전체 프로젝트 폴더의 이름입니다. 이 폴더는 아래와 같이 지정한 디렉터리에 자동으로 생성됩니다(제 예에서는 폴더가 바탕화면에 생성됩니다).
초기화 명령을 실행할 때 사용자에게 프로젝트 이름, 설명, 작성자 및 기타 정보와 같은 몇 가지 기본 옵션을 입력하라는 메시지가 표시됩니다. 필드를 채우지 않으려면 Enter를 누르십시오. 기본값으로.
firstVue 폴더를 열면 프로젝트 파일은 다음과 같습니다.
전체 프로젝트의 디렉터리 구조인데, 그 중 src 디렉터리에서 주로 수정을 합니다. 이 프로젝트는 아직은 구조적 프레임워크일 뿐이며, 아래와 같이 전체 프로젝트에 필요한 종속 리소스가 아직 설치되지 않았습니다.
프로젝트에 필요한 종속성을 설치합니다
종속성 패키지를 설치하려면 먼저 프로젝트 폴더(firstVue 폴더)에 CD를 넣은 후
cnpm install
명령을 실행하여 설치를 기다립니다.
安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。
安装完依赖包之后，就可以运行整个项目了。
运行项目
在项目目录中，运行命令，
npm run dev
会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式。
项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。
如果看到这个页面，说明项目运行成功了。
相关推荐：
更多编程相关知识，请访问：编程教学！！
위 내용은 vue.js에서 프로젝트를 실행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!