VUE 프로젝트 만들기에 대한 간단한 튜토리얼

vue.js 프로젝트를 만들기위한 단계 : 설치 전제 조건 : node.js (v16.x), vue Cli (글로벌 설치). 프로젝트 생성 : vue create 명령을 사용하여 대상 디렉토리로 이동하십시오. 설치 종속성 : Vue CLI는 종속성을 자동으로 설치합니다. 프로젝트 실행 : 프로젝트 디렉토리에서 NPM Run Serve 명령을 사용하십시오.

vue.js 프로젝트를 만들기 위해 단계별로 가르쳐주십시오.

준비:

• node.js 설치 (v16.x 이상)
• Vue CLI 설치 (글로벌 설치)

 <code>npm install -g @vue/cli</code>

프로젝트 만들기 :

1. 터미널 또는 명령 프롬프트를 열고 프로젝트를 작성하려는 위치로 이동하십시오.
2. 다음 명령을 실행하십시오.

 <code>vue create </code>

설치 종속성 :

• VUE CLI는 프로젝트를 생성하고 종속성을 자동으로 설치합니다.

프로젝트 실행 :

• 프로젝트 디렉토리에서 다음 명령을 실행하십시오.

 <code>npm run serve</code>

• 이것은 http : // localhost : 8080 에서 개발 서버를 시작합니다.

프로젝트 구조 :

• src/main.js : 프로젝트 진입 점, Vue 인스턴스 작성 및 마운트.
• SRC/APP.VUE : 루트 vue 구성 요소, 응용 프로그램의 레이아웃 및 내용을 정의합니다.
• SRC/구성 요소 : 재사용 가능한 VUE 구성 요소를 포함하는 디렉토리.
• 공개 : 정적 파일과 Favicon을 포함하는 디렉토리.
• node_modules : npm에서 설치 한 종속성의 디렉토리.
• package.json : 프로젝트 설정, 종속성 및 스크립트가 포함 된 JSON 파일.

Code example:

• src/main.js :

 <code class="js">import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')</code>

• src/app.vue :

 <code class="html"><template> <div> <h1 id="message">{{ message }}</h1> <button>Say Hello</button> </div> </template> <script> export default { data() { return { message: &#39;Hello Vue!&#39; } }, methods: { sayHello() { this.message = &#39;Hello, I am Vue!&#39; } } } </script></code>

알아채다:

• VUE CLI는 .env 및 vue.config.js 와 같은 사전 설정 및 옵션을 기반으로 다른 파일을 자동으로 구성합니다.
• Vue Create -Help 명령을 실행하여 사용 가능한 사전 설정 및 옵션을 볼 수 있습니다.

위 내용은 VUE 프로젝트 만들기에 대한 간단한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!