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

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

PHPz

풀어 주다： 2023-04-17 17:25:32

원래의

1401명이 탐색했습니다.

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

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

CDN을 사용하여 Vue 소개

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

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

로그인 후 복사

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 인스턴스를 생성하는 예입니다.

<div id="app">
   {{ message }}
</div>

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

로그인 후 복사

Summary

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

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