>  기사  >  웹 프론트엔드  >  vuejs에 종속성을 설치하는 방법

vuejs에 종속성을 설치하는 방법

青灯夜游
青灯夜游원래의
2021-09-26 17:32:1516323검색

vuejs 종속성을 설치하는 방법: 1. node 및 cnpm을 설치합니다. 2. vue-cli 스캐폴딩 구성 도구를 설치합니다. 3. vue-cli를 사용하여 프로젝트를 빌드합니다. 4. cmd 명령 창을 열고 cd 명령을 사용합니다. 특정 프로젝트 폴더 Medium을 입력합니다. 5. "cnpm install" 명령을 실행하여 종속성을 설치합니다.

vuejs에 종속성을 설치하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

1. 개발 환경

vue 권장 개발 환경:

Node.js: javascript 런타임(런타임), 다양한 시스템에서 직접 다양한 프로그래밍 언어 실행 ​

npm: Nodejs 아래의 패키지 관리자.

webpack: 주요 목적은 리소스 병합 및 패키징과 같이 CommonJS 구문을 통해 브라우저에서 게시해야 하는 모든 정적 리소스를 준비하는 것입니다.

vue-cli: 사용자 생성 Vue 프로젝트 템플릿

2. 환경 설정

node.js 설치:
1. node.js 공식 웹사이트에서 node를 다운로드하고 설치하는 방법은 매우 간단합니다. .
2. npm 버전은 3.0 이상이어야 합니다. 이 버전보다 낮은 경우 업그레이드해야 합니다.

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g

3. node.js를 기반으로 Taobao npm 미러를 사용하여 관련 종속 항목을 설치합니다. 중국에서는 npm을 사용하면 매우 느리므로 Taobao NPM 미러(http://npm.taobao.org/)를 사용하는 것이 좋습니다.

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

완료 후 npm 대신 cnpm을 사용하여 종속 패키지를 설치할 수 있습니다.

3. vue-cli 스캐폴딩 구성 도구를 설치합니다.

필요한 템플릿 프레임워크를 구축하는 데 도움이 되는 전역 vue-cli 스캐폴딩을 설치합니다.

$ cnpm install -g vue-cli
# 回车,等待安装...
$ vue
# 回车,若出现vue信息说明表示成功

4. vue-cli를 사용하여 프로젝트를 빌드합니다

# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:

     cd my-project
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

다섯. cmd

1에 종속성을 설치합니다. cd my-project(프로젝트 이름)를 입력하고 Enter를 누른 후 특정 프로젝트 폴더를 입력합니다.

2). , Enter를 누르고 잠시 기다리세요

cd my-project(项目名),回车,进入到具体项目文件夹

2).输入:cnpm install,回车,等待一小会儿

回到项目文件夹,会发现项目结构里,多了一个node_modules文件夹(该文件里的内容就是之前安装的依赖)

六、测试环境是否搭建成功

方法1:在cmd里输入:npm run dev프로젝트 폴더로 돌아가면 프로젝트 구조에 추가 node_modules 폴더가 있음을 알 수 있습니다(이 파일의 내용은 이전에 설치된 종속성입니다)

6. 테스트 환경 설정 성공 여부

방법 1: cmd에 입력: npm run dev

🎜방법 2: 브라우저에 입력: localhost:8080 (기본 포트는 8080) 🎜🎜관련 추천: "🎜vue.js Tutorial🎜"🎜

위 내용은 vuejs에 종속성을 설치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.