Node.js를 사용하지 않고 Vue를 개발하는 방법에 대해 이야기해 보겠습니다.-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

Node.js를 사용하지 않고 Vue를 개발하는 방법에 대해 이야기해 보겠습니다.

Apr 17, 2023 pm 04:39 PM

Vue 개발: NodeJS를 사용하지 않습니다

프런트엔드 기술의 발전으로 Vue는 널리 사용되는 프런트엔드 프레임워크가 되었습니다. 개발을 위해 Vue를 사용할 때 Node.js는 일반적으로 로컬 개발 환경 구축, 패키징 및 게시 등에 사용됩니다. Node.js에 익숙하지 않은 일부 초보자나 개발자에게는 이 프로세스가 어려울 수 있습니다. 따라서 이번 글에서는 Node.js를 사용하지 않고 Vue를 개발하는 방법을 소개하겠습니다.

CDN을 사용하여 Vue 소개

먼저 HTML 페이지에서 CDN을 통해 Vue.js 및 Vue Router.js를 소개하여 jQuery를 사용하는 것과 유사한 Vue 개발을 수행합니다.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
   &lt;meta charset=&quot;UTF-8&quot;&gt;
   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
   &lt;title&gt;Vue Development without Node.js&lt;/title&gt;
   &lt;!-- 引入 Vue.js 和 Vue Router --&gt;
   &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
   &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
   &lt;script&gt;
      // 创建 vue router
      const router = new VueRouter({
         routes: [...]
      });
      // 创建 vue 实例
      const app = new Vue({
         router,
         el: '#app',
         data: {...},
         methods: {...},
         mounted() {...}
      });
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

Webpack을 사용하여 패키징

추가로 CDN을 사용하여 Vue를 로드하는 것 외에도 Webpack을 사용하여 패키징할 수도 있습니다. Webpack은 JavaScript 및 CSS 파일은 물론 이미지 및 글꼴과 같은 정적 리소스까지 패키징하는 데 사용할 수 있는 매우 강력한 도구입니다. 또한 핫 리로딩, 코드 분리, 주문형 로딩과 같은 고급 기능도 지원합니다.

다음은 Webpack 기반 Vue 개발 환경 구성 파일의 예입니다.

const path = require('path');

module.exports = {
   entry: './src/index.js',
   output: {
      path: path.resolve(__dirname, './dist'),
      filename: 'bundle.js'
   },
   module: {
      rules: [
         {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
               loader: 'babel-loader',
               options: {
                  presets: ['@babel/preset-env']
               }
            }
         }
      ]
   },
   devServer: {
      contentBase: path.join(__dirname, 'dist'),
      compress: true,
      port: 9000
   }
};

로그인 후 복사

Vue CLI 사용

Webpack에 충분히 익숙하지 않은 경우 Vue CLI를 사용하여 Vue 프로젝트를 빠르게 빌드하는 것을 고려할 수 있습니다. Vue CLI는 Vue.js 개발자를 위한 공식 스캐폴딩으로, 완전한 Vue 프로젝트를 신속하게 생성하고 Webpack과 일반적으로 사용되는 일부 Vue 플러그인을 통합하여 개발 및 구성 시간을 많이 단축할 수 있습니다.

Vue CLI를 사용하여 Vue 프로젝트를 생성하는 단계는 다음과 같습니다.

Vue CLI 설치

npm install -g vue-cli

로그인 후 복사

새 Vue 프로젝트 생성

vue create my-project

로그인 후 복사

Vue 프로젝트 실행

cd my-project
npm run serve

로그인 후 복사

JSFiddle 사용

만약 Vue의 일부 기능만 사용해 보고 싶다면 Vue 개발에 JSFiddle을 사용하는 것을 고려해 보세요. JSFiddle은 Vue 인스턴스를 생성하고 실시간 편집 및 디버깅을 수행할 수 있는 온라인 개발 환경입니다.

다음은 JSFiddle에서 Vue 인스턴스를 생성하는 예입니다.

&lt;div id=&quot;app&quot;&gt;
   {{ message }}
&lt;/div&gt;

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
   new Vue({
      el: '#app',
      data: {
         message: 'Hello Vue!'
      }
   });
&lt;/script&gt;

로그인 후 복사

Summary

위는 Node.js를 사용하지 않고 Vue를 개발하는 몇 가지 방법입니다. CDN 도입, Webpack을 사용한 패키징, Vue CLI 또는 JSFiddle을 사용한 패키징 등 적용 가능한 시나리오가 있습니다. 실제 프로젝트 개발에서는 다양한 요구 사항과 기술 수준에 따라 적절한 개발 계획을 선택할 수도 있습니다.

위 내용은 Node.js를 사용하지 않고 Vue를 개발하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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