집 > 기사 > 웹 프론트엔드 > vue.js에는 여러 가지 설치 방법이 있습니다.

vue.js에는 여러 가지 설치 방법이 있습니다.

青灯夜游원래의: 2020-12-18 14:18:022599검색

vue.js에는 세 가지 일반적인 설치 방법이 있습니다. 1. Vue.js 공식 웹사이트에서 직접 vue.js 파일을 다운로드하고 html의 스크립트 태그에서 참조합니다. 2. CDN 방법을 사용하고 다음에서 사용합니다. html의 스크립트 태그를 직접 참조하려면 CDN 링크를 사용하세요. 3. NPM 도구를 사용하여 설치하세요.

이 튜토리얼의 운영 환경: windows7 시스템, vue2.9 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

독립 버전

Vue.js 공식 웹사이트에서 vue.js를 직접 다운로드하고 HTML로 <script>를 전달할 수 있습니다. 코드> 태그. <code><script src = ../vue.js> </script> 개발 환경에서는 최소 압축 버전을 사용하지 마세요. 그렇지 않으면 오류 메시지나 경고가 표시되지 않습니다! (페이지에서 직접 사용) <script></script>标签中引用。<script src="../vue.js"> </script> 开发环境不要使用最小压缩版，不然会没有错误提示和警告！（页面中直接使用）

使用vue多页面开发：

引入vue.js
创建一个vue根实例 new Vue({选项})

使用CDN方法

BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js ，（国内不稳定）

unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。（推荐使用）

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js，如（<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>）

NPM方法（推荐使用）

在用Vue.js构建大型应用的时候推荐使用NPM安装方法，NPM能很好的和诸如Webpack或者Browserify模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

首先，先列出我们接下来需要的东西：

node.js环境（npm包管理器）
vue-cli 脚手架构建工具
cnpm npm的淘宝镜像

安装node.js

从node.js官网下载并安装node，安装过程很简单，一直点下一步就ok了，安装完之后，我们通过打开命令行工具（win+R）,输入node -v 命令，查看node的版本，若出现相应的版本号，则说明你安装成功了。

npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息。

到目前为止，node的环境已经安装完成，npm 包管理器也有了，由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm.

安装cnpm

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org ，然后等待，没报错表示安装成功，（我的已经安装过了，显示更新成功的信息），如下图：

完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网。

安装vue-cli 脚手架构建工具（必须在全局中进行安装）

在命令行中运行命令 npm install -g vue-cli

vue 다중 페이지 개발 사용:

vue.js 소개
vue 루트 인스턴스 만들기 new Vue({option})
BootCDN(국내): https://cdn.bootcss.com/vue/2.2.2/vue.min.js, (국내 불안정)

unpkg: https://unpkg.com/vue/dist/ vue .js는 npm이 출시한 최신 버전과 일관성을 유지합니다. (권장)

cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js, 예: (<script src="https://cdnjs%20.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>)

NPM 방법(권장 사용 )

🎜Vue.js로 대규모 애플리케이션을 구축할 때는 NPM 설치 방법을 사용하는 것이 좋습니다. NPM은 Webpack 또는 Browserify)와 같은 모듈 패키저와 잘 사용할 수 있습니다. > . Vue.js는 단일 파일 구성 요소를 개발하기 위한 지원 도구도 제공합니다. 🎜🎜먼저 다음에 필요한 것을 나열해 보겠습니다. 🎜

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

npm install -g vue-cli

NodeTest 디렉터리의 명령줄에서 명령을 실행하세요. vue init webpack firstApp(프로젝트의 전체 버전을 초기화하세요) . 이 명령어에 대해 설명해주세요. 이 명령어는 webpack이 빌드 도구인 프로젝트, 즉 전체 프로젝트가 webpack을 기반으로 하는 프로젝트를 초기화한다는 의미입니다. 여기서 firstApp은 전체 프로젝트 폴더의 이름입니다. 이 폴더는 지정한 디렉터리에 자동으로 생성됩니다(제 예에서는 NodeTest에 있음).

이 프로젝트가 편집기에 저장되는 폴더를 수동으로 생성한 경우 프로젝트로 cd하세요. vue init webpack을 초기화하면 webpack도 마찬가지입니다. 로드됨 종속 패키지:

이 디렉토리에 생성되는지 여부

명령을 입력하면 몇 가지 간단한 옵션이 표시되며 필요에 따라 채울 수 있습니다.

프로젝트 이름: 프로젝트 이름, 변경할 필요가 없으면 Enter를 누르세요. 참고: 여기서는 대문자를 사용할 수 없으므로 이름을 vueclitest
로 변경했습니다. 프로젝트 설명: 프로젝트 설명, 기본값은 A Vue.js 프로젝트입니다. Enter만 누르면 됩니다. 작성할 필요가 없습니다.
작성자: 작성자님, git 작성자를 설정해 놓으셨다면 읽어주실 겁니다.
vue-router를 설치하시겠습니까? vue 라우팅 플러그인을 설치해야 하므로 Y
ESLint를 사용하여 코드를 린트하시겠습니까?를 선택하세요. 코드 오류와 스타일을 제한하려면 ESLint를 사용하세요. 여기에 n을 입력할 필요는 없습니다(권장). 대규모 팀에서 개발하는 경우 구성하는 것이 가장 좋습니다.
Karma + Mocha로 단위 테스트 설정 단위 테스트 도구인 Karma+Mocha를 설치해야 합니까? 여기서는 필요하지 않으므로 n을 입력합니다.
Nightwatch로 e2e 테스트를 설정하시겠습니까? 여기서는 필요하지 않으므로 초기화 명령을 실행하기 위해 n

을 입력하면 사용자가 몇 가지 기본 구성 옵션을 입력하게 됩니다. , 프로젝트 이름, 프로젝트 설명, 작성자 정보와 같은 일부 정보를 이해하지 못하거나 입력하고 싶지 않은 경우 Enter 키를 눌러 입력하면 됩니다. 잠시 후 생성된 내용이 표시됩니다. 아래와 같이 프로젝트가 성공적으로 생성되었습니다.

다음으로 NoteTest 디렉터리로 이동하여 파일이 생성되었는지 확인합니다.

프로젝트의 디렉터리는 다음과 같습니다. :

디렉토리와 해당 기능을 소개합니다:

build: 최종 출시된 코드가 저장되는 곳입니다.
config: 경로, 포트 번호 및 기타 정보를 구성합니다. 처음 학습을 시작할 때 기본 구성을 선택했습니다.
node_modules: npm이 로드하는 프로젝트에 필요한 다양한 종속 모듈입니다.
src: 이것은 개발을 위한 기본 디렉터리(소스 코드)입니다. 기본적으로 우리가 해야 할 모든 작업은 여러 디렉터리와 파일이 포함된 이 디렉터리에 있습니다.
- assets: 로고 등의 사진을 배치합니다.
- comComponents : 디렉토리에는 컴포넌트 파일이 하나씩 포함되어 있습니다.
- router/index.js: 라우팅이 구성된 위치
- App.vue: 프로젝트 항목 컴포넌트(컴포넌트 포함), 컴포넌트 디렉토리를 사용하는 대신 여기에 컴포넌트를 작성할 수도 있습니다. 주요 기능은 렌더링을 위해 자체 정의된 구성 요소를 페이지와 연결하는 것이며 이는 필수적입니다.
- main.js: 프로젝트의 핵심 파일(전체 프로젝트의 항목 js)은 종속성 패키지, 기본 페이지 스타일 등을 소개합니다. (app.js 파일은 프로젝트 실행 후 index.html에 형성됩니다.) .
- static: 그림, 글꼴 등과 같은 정적 리소스 디렉터리입니다.
- test: 초기 테스트 디렉터리, 삭제 가능
.XXXX 파일: 구성 파일.
index.html: 단일 HTML 페이지의 시작 페이지로 일부 메타 정보나 통계 코드를 추가하거나 페이지 스타일을 재설정할 수 있습니다.
package.json: 프로젝트 구성 정보 파일/종속 개발 패키지의 버전 정보 및 종속 플러그인 정보.
README.md: 프로젝트 설명 파일.
webpack.config.js: .vue 파일을 브라우저가 이해할 수 있는 파일로 패키징하는 webpack의 구성 파일입니다.
.babelrc: es6 구문을 감지하는 파일의 구성입니다.
.getignore: 무시되는 파일의 구성(예: 온라인으로 제출/패키징할 때 무시되지 않도록 로컬 데이터 모의 시뮬레이션을 구성할 수 있음) 여기)
. postcssrc.js: 접두사 구성
.eslintrc.js: eslint 문법 규칙 구성(규칙 속성에서 어떤 문법 규칙이 유효하지 않은지 구성)
.eslintignore: 특정 파일의 문법 규칙에 대한 eslint 검사를 무시합니다. the project

전체 프로젝트의 디렉토리 구조입니다. 그 중 src 디렉토리에서 주로 수정을 합니다(모듈형 개발). 이 프로젝트는 아직은 단지 구조적 프레임워크일 뿐이며 전체 프로젝트에 필요한 모든 종속 리소스가 아직 설치되지 않았습니다.

cd 프로젝트 이름, 프로젝트 입력

프로젝트에 필요한 종속성 패키지/플러그인 설치(package.json에서 볼 수 있음): cnpm install 실행(npm에 경고가 표시될 수 있음) 여기에서 cnpm을 사용할 수 있습니다. npm 대신 다른 사람의 코드를 실행하려면 먼저 종속성을 설치해야 합니다.)프로젝트 생성 시 오류가 보고되지 않으면 다음과 같습니다. 단계는 생략될 수 있습니다. 오류가 보고되면 프로젝트로 cd하고 cnpm install / npm installcnpm install (npm可能会有警告，这里可以用cnpm代替npm了，运行别人的代码需要先安装依赖)如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行 cnpm install / npm install

若拿到别人的项目或从gethub上下载的项目第一步就是要在项目中cnpm install;下载项目所依赖的插件，然后npm run dev 运行项目

安装完成之后，我们到自己的项目中去看，会多一个node_modules文件夹，这里面就是我们所需要的依赖包资源。

安装完依赖包资源后，我们就可以运行整个项目了。

运行项目

在项目目录中，运行命令 npm run dev （npm run start），会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

项目启动后，在浏览器中输入项目启动后的地址：

在浏览器中会出现vue的logo：

至此，vue的三种安装方式已介绍完毕。

项目完成后输入打包命令:cnpm run build;会生成一个dist文件，就是我们的打包文件，点击.html文件能运行则成功。

搭建vue的开发环境（大纲）

必须安装node.js
搭建vue的开发环境，安装vue的脚手架工具官方命令行工具npm install - -global vue-cli
创建项目必须cd到对应的一个项目里面

vue init webpack vue-demo01

cd vue-demo01
을 실행하세요. 다른 사람의 것을 얻는다 프로젝트 또는 gethub에서 다운로드한 프로젝트의 첫 번째 단계는 프로젝트가 의존하는 플러그인을 cnpm install 다운로드한 다음 npm run dev입니다. > 프로젝트 실행 🎜🎜🎜🎜 설치 완료 후 프로젝트로 이동하여 필요한 종속성 패키지 리소스가 포함된 추가 node_modules 폴더가 있는지 확인합니다. 🎜🎜🎜🎜설치 종속성 패키지 리소스를 완료한 후 전체 프로젝트를 실행할 수 있습니다. 🎜🎜프로젝트 실행🎜🎜프로젝트 디렉토리에서 npm run dev(npm run start) 명령을 실행하면 핫 로딩으로 애플리케이션이 실행됩니다. 브라우저를 수동으로 새로 고치지 않고도 실시간으로 수정된 효과를 확인할 수 있습니다. 🎜🎜🎜🎜 프로젝트 시작 후 브라우저에 프로젝트 시작 주소를 입력하세요: 🎜🎜🎜🎜 vue 로고가 브라우저에 나타납니다: 🎜🎜🎜🎜이제 Vue의 세 가지 설치 방법이 소개되었습니다. 🎜🎜프로젝트가 완료된 후 패키징 명령을 입력하세요: cnpm run build; 우리의 패키징 파일인 dist 파일이 생성됩니다. .html 파일을 클릭하여 실행하면 성공합니다. 🎜
vue 개발 환경 구축(개요)
🎜🎜🎜Node.js가 설치되어 있어야 합니다🎜🎜🎜🎜빌딩 vue용 개발 환경, vue의 스캐폴딩 도구 공식 명령줄 도구 설치 npm install - -global vue-cli🎜🎜🎜🎜프로젝트를 생성하려면 해당 프로젝트에 CD를 넣어야 합니다🎜🎜 vue init webpack vue-demo01 🎜🎜cd vue-demo01🎜
cnpm install / npm install 프로젝트 생성 시 오류가 보고되지 않으면 이 단계를 생략할 수 있습니다. 오류가 보고되면 프로젝트로 cd하고 cnpm install / npm installcnpm install / npm install 如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行cnpm install / npm install
npm run dev/npm run start

另一种创建项目的方式中小型项目（推荐）

vue init webpack-simple vuedemo02

cd vuedemo02

cnpm install / npm install

npm run dev

拿到别人的项目不能正常运行后看有没有node_modules这个文件（项目所有的依赖），若没有cd到项目中安装项目的依赖：cnpm install/npm install

npm run dev/npm run start

또 다른 프로젝트 생성 방법 중소규모 프로젝트를 위한 방법(권장)

vue init webpack-simple vuedemo02cd vuedemo02

cnpm install / npm install

npm run dev
있는지 확인해보세요 정상적으로 실행될 수 없는 다른 사람의 프로젝트를 가져온 후 문제가 발생합니다. 프로젝트 종속성을 설치할 프로젝트에 대한 CD가 없는 경우 node_modules 파일(프로젝트의 모든 종속성): cnpm install/npm install

🎜🎜관련 권장 사항: 🎜🎜🎜🎜2020 프론트 엔드 vue 인터뷰 질문 요약(답변 포함) 🎜🎜🎜🎜vue 튜토리얼 권장 사항: 2020년 최신 5개 vue.js 비디오 튜토리얼 선택🎜🎜🎜🎜더 많은 프로그래밍 관련 지식이 있으시면 🎜프로그래밍 교육🎜을 방문해 주세요! ! 🎜🎜

위 내용은 vue.js에는 여러 가지 설치 방법이 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

node.js 架构 json ajax vue.js html es6 npm webpack Static JS git http https

성명：

이전 기사：vue.js에서 시간 형식을 설정하는 방법다음 기사：vue.js에서 시간 형식을 설정하는 방법

vue.js에는 여러 가지 설치 방법이 있습니다.

독립 버전

使用CDN方法

NPM方法（推荐使用）

搭建vue的开发环境（大纲）

vue 개발 환경 구축(개요)

관련 기사