Webpack 및 vue2 빌드 vue 프로젝트 뼈대 설명
이 글에서는 Vue 프로젝트의 뼈대를 구축하기 위한 webpack+vue2 방법을 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
프런트엔드 프로젝트 패키징 도구인 webpack과 프론트엔드 개발 프레임워크 vue는 이제 프론트엔드와 백엔드 분리 이후 매우 인기 있는 기술입니다. 오늘은 주로 webpack과 vue2를 사용하여 프로젝트의 기본 뼈대를 구축하는 방법에 대해 이야기합니다. 프런트엔드와 백엔드 분리 프로젝트. vue-cli 스캐폴딩을 사용하면 프로젝트 뼈대를 구축하는 데 도움이 될 수 있지만 여전히 원리를 이해하는 것이 중요하다고 생각하므로 이 글에서는 주로 webpack과 vue를 사용하여 기본 프로젝트를 구축하는 방법을 작성합니다. 전제는 nodejs가 설치되어 있다는 것입니다.
전체 프로젝트에는 npm을 통해 설치된 종속성이 필요합니다
css: style-loader, css-loader, sass-loader, node-sass
js: babel-core, babel-loader, babel-preset-es2015
webpack: webpack, webpack-dev-server
vue: vuer, vue-loade, vue-html-loader, vue-template-compiler
새 프로젝트 디렉터리 만들기
우선 먼저 다음 프로젝트를 위한 새 디렉터리를 만들어야 합니다. myApp 우리 프로젝트를 넣고 터미널에 프로젝트를 입력한 후 프로젝트 초기화를 시작합니다.
프로젝트 초기화 중
$ npm init
프로젝트 초기화 시 특별한 작업이 없다면 "Enter 키"만 누르면 됩니다. 프로젝트 초기화가 완료되면 주로 프로젝트 종속성 디렉터리를 저장하고 프로젝트 시작 명령을 구성하기 위한 package.json 파일이 생성됩니다.
종속성 설치
$ npm i style-loader --D
npm을 사용하여 종속성을 설치할 때 "--D"를 추가하면 package.json에 기록이 남으므로 끝에 "--D"를 추가합니다. 다른 시스템에서 프로젝트를 열면 개발 중에 npm을 통해 설치된 종속성을 사용할 수 없다는 것을 알 수 있습니다. 이는 시스템 호환성 때문입니다. 그리고 프로젝트 개발 시 설치 종속성에 "--D"를 추가하면 프로젝트의 node_modules를 복사할 필요 없이 프로젝트를 열기 전에 npm을 통해 모든 종속성을 설치하기만 하면 됩니다.
$ npm i
webpack.config.js 파일 구성
webpack의 모든 구성은 webpack.config.js 파일에 있으므로 프로젝트 초기화 후 webpack.config.js 파일을 새로 생성해야 합니다. 그리고 구성해보세요. 지난번에 webpack의 기본 구성에 대해 썼기 때문에 여기서는 반복하지 않겠습니다. 구성 코드를 직접 붙여넣겠습니다:
module.exports = {
entry: './src/main.js',
output:{
path: __dirname + '/dist/',
filename: 'bundle.js'
},
devtool:'source-map',
devServer:{
// 主要改变项目的根目录
contentBase: __dirname + '/dist/',
port:8080,
inline:true
},
module:{
loaders:[
{test:/\.css$/,loader :'style-loader!css-loader'},
{test:/\.js$/, loader:'babel-loader',exclude:/node_modules/},
{ test: /\.vue$/, loader: 'vue-loader' }
]
},
//vue文件想要解析必须要要加上这句才能成功
resolve: { alias: { 'vue': 'vue/dist/vue.js' } }
}Configuring package.json
구성해야 할 주요 항목 package.json 시작 명령에서 개발 모드 시작 및 패키지된 프로젝트 빌드.
프로젝트 시작
$ npm start
프로젝트 패키징
$ npm run build
전체 프로젝트 디렉토리
src: 우리가 개발하는 소스 파일이 이 디렉토리에 있습니다
컴포넌트 들: 모든 구성 요소를 저장하는 데 사용됩니다.
styles: 모든 스타일 파일을 저장합니다.
utils: 직접 작성해야 하는 모든 메서드와 함수를 저장합니다.
app.vue: 모든 vue 파일에 대한 항목 파일
main.js: js 항목 파일 전체 프로젝트용
index.html: 이 파일은 실제 프로젝트의 루트 디렉터리인 myApp에 위치할 수 있으며, 웹팩 패키징으로 생성된 dist 디렉터리에 위치할 수 있습니다. 루트 디렉터리에 있는 경우 webpack의 contentBase: __dirname입니다. .config.js, dist에 있는 경우 contentBase: __dirname + '/dist/'. 주요 목적은 프로젝트의 서비스 루트 디렉터리(localhos:8080을 열 때 브라우저에 표시되는 디렉터리)의 위치를 변경하는 것입니다. (테스트 후 패키지에서 생성된 dist 디렉토리에 두는 것이 더 좋을 것 같습니다. 주로 개발 모드에서는 실시간 업데이트가 가능합니다. 정확하지 않을 수 있습니다. 나중에 테스트 후 수정하시기 바랍니다)
index. html file code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>webpack+vue</title> </head> <body> <p id="app"></p> <script src="./bundle.js"></script> </body> </html>
main.js file code
//引入vue框架<br>
//import是es6的写法，其实和var Vue = require('vue')是相同的意义<br>import Vue from 'vue';<br>
//引入App.vue文件，这个文件也是vue所有组件的入口，我们的项目就是将这个文件追加到index.html文件里面
import App from './App.vue';
new Vue({
el:'#app',
components: {App},<br>//主要目点就是将App追加到“#app”里面去
render: h => h(App)
})
App.vue文件代码
<template>
<p>Hello VueJS!</p>
</template>
<script>
export default{
name:"app"
}
</script>이 시점에서 전체 프로젝트는 기본적으로 브라우저에 localhost:8080을 입력하면 다음과 같은 화면이 표시됩니다.
관련 추천 :
vue 프로젝트의 공통 컴포넌트 및 프레임워크 구조 공유
위 내용은 Webpack 및 vue2 빌드 vue 프로젝트 뼈대 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7470
15
1377
52
77
11
48
19
19
29
VUE3 시작하기 튜토리얼: Webpack을 사용한 패키징 및 빌드
Jun 15, 2023 pm 06:17 PM
Vue는 대화형의 효율적인 웹 애플리케이션을 신속하게 구축하는 데 도움이 되는 탁월한 JavaScript 프레임워크입니다. Vue3은 Vue의 최신 버전으로, 많은 새로운 특징과 기능을 도입했습니다. Webpack은 현재 프로젝트의 다양한 리소스를 관리하는 데 도움이 되는 가장 인기 있는 JavaScript 모듈 패키저 및 빌드 도구 중 하나입니다. 이 기사에서는 Webpack을 사용하여 Vue3 애플리케이션을 패키징하고 빌드하는 방법을 소개합니다. 1. 웹팩 설치
Nginx 웹 서버 캐디를 사용하는 방법
May 30, 2023 pm 12:19 PM
Caddy 소개 Caddy는 현재 Github에 38,000개 이상의 별이 있는 강력하고 확장성이 뛰어난 웹 서버입니다. Caddy는 Go 언어로 작성되었으며 정적 리소스 호스팅 및 역방향 프록시에 사용할 수 있습니다. Caddy에는 다음과 같은 주요 기능이 있습니다. Nginx의 복잡한 구성에 비해 원래 Caddyfile 구성은 매우 간단합니다. 기본적으로 자동화된 HTTPS 구성을 지원하고 HTTPS 인증서를 자동으로 적용할 수 있습니다. 수만 개의 사이트를 Go 언어로 작성하여 어디서나 실행할 수 있으며 메모리 안전성이 더욱 보장됩니다. 우선 CentO에 직접 설치해보겠습니다.
Java API 개발에서 웹 서버 처리를 위해 Jetty7 사용
Jun 18, 2023 am 10:42 AM
JavaAPI 개발에서 웹 서버 처리를 위해 Jetty7 사용 인터넷의 발전과 함께 웹 서버는 애플리케이션 개발의 핵심 부분이 되었으며 많은 기업의 초점이기도 합니다. 증가하는 비즈니스 요구를 충족하기 위해 많은 개발자가 웹 서버 개발에 Jetty를 사용하기로 선택했으며 그 유연성과 확장성은 널리 인정받고 있습니다. 이 기사에서는 We 용 JavaAPI 개발에서 Jetty7을 사용하는 방법을 소개합니다.
웹상의 얼굴 차단 공격에 대한 실시간 보호(머신러닝 기반)
Jun 10, 2023 pm 01:03 PM
얼굴 차단 사격은 영상 속 인물을 가리지 않고 다수의 사격이 떠다니는 것처럼 보이도록 하여 마치 인물 뒤에서 떠다니는 것처럼 보이게 하는 것을 의미합니다. 기계 학습은 몇 년 동안 널리 사용되었지만 많은 사람들은 이러한 기능을 브라우저에서도 실행할 수 있다는 사실을 모릅니다. 이 기사에서는 기사 마지막 부분에 적용 가능한 몇 가지 시나리오를 소개합니다. 이 솔루션을 통해 몇 가지 아이디어를 얻을 수 있기를 바랍니다. mediapipeDemo(https://google.github.io/mediapipe/)는 주류 얼굴 차단 공세 주문형 업로드의 구현 원리를 보여줍니다. 비디오 서버 백그라운드 계산은 비디오 화면의 세로 영역을 추출하고 이를 svg로 변환합니다. 클라이언트가 비디오를 재생하는 동안 서버에서 svg를 다운로드하고 사격, 초상화와 결합합니다.
frps 서버와 웹이 포트 80을 공유하도록 nginx를 구성하는 방법
Jun 03, 2023 am 08:19 AM
우선, frp가 무엇인지에 대해 의문이 생길 것입니다. 간단히 말해서, frp는 인트라넷 침투 도구입니다. 클라이언트를 구성한 후 서버를 통해 인트라넷에 액세스할 수 있습니다. 이제 내 서버는 nginx를 웹 사이트로 사용했으며 포트 80은 하나만 있습니다. FRP 서버도 포트 80을 사용하려면 어떻게 해야 합니까? 쿼리 후에는 nginx의 역방향 프록시를 사용하여 이를 수행할 수 있습니다. 추가하려면: frps는 서버이고 frpc는 클라이언트입니다. 1단계: 서버에서 nginx.conf 구성 파일을 수정하고 nginx.conf의 http{}에 다음 매개변수를 추가합니다. server{listen80
Golang을 사용하여 웹 애플리케이션에 대한 양식 유효성 검사를 구현하는 방법
Jun 24, 2023 am 09:08 AM
양식 유효성 검사는 웹 애플리케이션 개발에서 매우 중요한 링크로, 애플리케이션의 보안 취약성과 데이터 오류를 방지하기 위해 양식 데이터를 제출하기 전에 데이터의 유효성을 확인할 수 있습니다. Golang을 사용하여 웹 애플리케이션에 대한 양식 유효성 검사를 쉽게 구현할 수 있습니다. 이 기사에서는 Golang을 사용하여 웹 애플리케이션에 대한 양식 유효성 검사를 구현하는 방법을 소개합니다. 1. 폼 유효성 검사의 기본 요소 폼 유효성 검사를 구현하는 방법을 소개하기 전에 먼저 폼 유효성 검사의 기본 요소가 무엇인지 알아야 합니다. 양식 요소: 양식 요소는
조종석 웹 UI에서 관리 액세스를 활성화하는 방법
Mar 20, 2024 pm 06:56 PM
Cockpit은 Linux 서버용 웹 기반 그래픽 인터페이스입니다. 이는 주로 신규/전문가 사용자가 Linux 서버를 보다 쉽게 관리할 수 있도록 하기 위한 것입니다. 이 문서에서는 Cockpit 액세스 모드와 CockpitWebUI에서 Cockpit으로 관리 액세스를 전환하는 방법에 대해 설명합니다. 콘텐츠 항목: Cockpit 입장 모드 현재 Cockpit 액세스 모드 찾기 CockpitWebUI에서 Cockpit에 대한 관리 액세스 활성화 CockpitWebUI에서 Cockpit에 대한 관리 액세스 비활성화 결론 조종석 입장 모드 조종석에는 두 가지 액세스 모드가 있습니다. 제한된 액세스: 이는 조종석 액세스 모드의 기본값입니다. 이 액세스 모드에서는 조종석에서 웹 사용자에 액세스할 수 없습니다.
웹 표준이란 무엇입니까?
Oct 18, 2023 pm 05:24 PM
웹 표준은 W3C 및 기타 관련 기관에서 개발한 일련의 사양 및 지침으로, HTML, CSS, JavaScript, DOM, 웹 접근성 및 성능 최적화를 포함하며, 이러한 표준을 따르면 페이지의 호환성이 향상됩니다. 접근성, 유지 관리성 및 성능. 웹 표준의 목표는 웹 콘텐츠가 다양한 플랫폼, 브라우저 및 장치에서 일관되게 표시되고 상호 작용할 수 있도록 하여 더 나은 사용자 경험과 개발 효율성을 제공하는 것입니다.
