집 >웹 프론트엔드 >JS 튜토리얼 >Taobao 미러 cnpm을 사용하여 Vue.js를 설치하는 방법

Taobao 미러 cnpm을 사용하여 Vue.js를 설치하는 방법

php中世界最好的语言원래의: 2018-05-29 10:17:505090검색

이번에는 Taobao 미러 cnpm을 사용하여 Vue.js를 설치하는 방법과 Taobao 미러 cnpm을 사용하여 Vue.js를 설치하는 데 필요한 주의 사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.

머리말

Vue.js는 프런트엔드에서 널리 사용되는 MVVM 프레임워크입니다. 이를 사용하려면 설치 방법 중 하나가 대규모 애플리케이션에 더 적합한 npm을 사용하는 것입니다. . 오늘은 npm이 외국어이기 때문에 상대적으로 사용 속도가 느립니다. 여기서는 Taobao의 cnpm 이미지를 사용하여 vue를 설치합니다.

Steps

먼저 npm을 다운로드해야 합니다. Node.js, npm이 설치 패키지에 통합된 다음 npm 명령을 사용하여 Taobao 이미지의 cnpm을 얻을 수 있습니다.

1. 명령줄 창을 열고

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

를 입력합니다. cnpm을 얻은 후 다음 명령을 입력해야 합니다.

cnpm install cnpm -g

Vue를 설치하려면 npm 버전이 3.0.0 이상이어야 하므로 잠시 후

다음 명령을 입력하여 vue

cnpm install vue

를 설치합니다. 다음으로 vue-cli

cnpm install --global vue-cli

를 설치합니다. 이제 환경이 설정되었습니다.

2. 다음으로 프로젝트를 저장할 디렉터리를 지정해야 합니다. 경로를 확인한 후 다음 명령을 입력하세요.

vue init webpack "项目名称"

3. 프로젝트가 있습니다

cd "프로젝트가 있는 폴더"

그런 다음 다음 명령을 순서대로 입력하세요

cnpm install 
cnpm run dev

성공 후 브라우저에 들어가 localhost:8080을 입력하면 다음 페이지가 표시됩니다.

Project 디렉터리

다음으로 위에서 성공적으로 생성된 프로젝트를 살펴보고 프로젝트 디렉터리

우리가 개발한 디렉터리는 src에 다음 디렉터리가 포함되어 있습니다.

assets: 돌연변이 저장

comComponents: 구성 요소 파일 저장

App.vue: 프로젝트 entry file, 구성 요소 디렉터리

main.js를 사용하는 대신 여기에 직접 구성 요소를 작성할 수도 있습니다. : 프로젝트 코어 파일

App.vue의 내용을 살펴보겠습니다.

<template>
 <p id="app">
 <img src="./assets/logo.png">
 <router-view></router-view>
 </p>
</template>
<script>
export default {
 name: 'app'
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

Hello.vue

<template>
 <p class="hello">
 <h1>{{ msg }}</h1>
 <h2>Essential Links</h2>
 <ul>
  <li><a href="https://vuejs.org" rel="external nofollow" target="_blank">Core Docs</a></li>
  <li><a href="https://forum.vuejs.org" rel="external nofollow" target="_blank">Forum</a></li>
  <li><a href="https://gitter.im/vuejs/vue" rel="external nofollow" target="_blank">Gitter Chat</a></li>
  <li><a href="https://twitter.com/vuejs" rel="external nofollow" target="_blank">Twitter</a></li>
  <br>
  <li><a href="http://vuejs-templates.github.io/webpack/" rel="external nofollow" target="_blank">Docs for This Template</a></li>
 </ul>
 <h2>Ecosystem</h2>
 <ul>
  <li><a href="http://router.vuejs.org/" rel="external nofollow" target="_blank">vue-router</a></li>
  <li><a href="http://vuex.vuejs.org/" rel="external nofollow" target="_blank">vuex</a></li>
  <li><a href="http://vue-loader.vuejs.org/" rel="external nofollow" target="_blank">vue-loader</a></li>
  <li><a href="https://github.com/vuejs/awesome-vue" rel="external nofollow" target="_blank">awesome-vue</a></li>
 </ul>
 </p>
</template>
<script>
export default {
 name: 'hello',
 data () {
 return {
  msg: 'Welcome to 菜鸟教程'
 }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 자세한 내용은 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 주세요!