vue-cli 로 vue 프로젝트 와 webpack 을 만 드 는 것 을 자세히 설명 합 니 다.
vue-cli 로 vue 프로젝트 를 만 듭 니 다.
첫 번 째 단계:전역 설치 vue-cli
sudo npm install vue-cli -g
vue init webpack-simple projectName
cd projectName
npm install
cnpm install
npm run dev webpack
vue 프로젝트 를 시작 하려 면,
그래도 웹 팩 에 대해 서 알 아야 돼 요.
웹 팩 은 전단 자원 모듈 화 관리 와 포장 도구 입 니 다.
우선 js,css 파일 을 많이 만 들 수 있 습 니 다.그러나 웹 팩 을 이용 하여 index.html 에서 js 파일 을 참조 하 십시오.즉,패키지 파일 이란 js,css 파일 을 참조 할 필요 가 없습니다.
STEP 1:전역 웹 팩 설치
sudo npm install webpack -g
npm init
npm install webpack --save-dev
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
//module.js
module.exports = 'It works from module.js.'
//entry.js
document.write('It works.')
document.write(required('./module.js'))
STEP 6:bundle.js 파일 에 entry.js 파일 을 압축 합 니 다.
webpack entry.js bundle.js
//style.css
body{
background:red
}
STEP 8:css 파일 도 포장
entry.js 파일 수정
require("!style-loader!css-loader!./style.css") // style.css
document.write('It works.')
document.write(require('./module.js'))
npm install css-loader style-loader
webpack entry.js bundle.js 제1 1 단계:설정 js 파일,webpack.config.js 를 만 듭 니 다.
//webpack.config.js
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
}
}
test:템 플 릿 을 분석 해 야 하 는 파일 입 니 다.정규 표현 식 입 니 다.
loader:test 에 포 함 된 파일 을 어떤 방식 으로 처리 해 야 하 는 지,xxx-loader 로 test 의 정규 파일 을 읽 습 니 다.
STEP 12:그리고 css 파일 을 포장 할 때 단순화 할 수 있 습 니 다.
require('./style.css') 13 단계:계속 컴 파일 하고 싶 지 않 고 실시 간 으로 모니터링 하고 싶 습 니 다.
webpack --watch
npm install webpack-dev-server -g
webpack-dev-server 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
