Node.js를 사용하지 않고 Vue를 개발하는 방법에 대해 이야기해 보겠습니다.
- PHPz원래의
- 2023-04-17 16:39:421419검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!