집 > 기사 > 웹 프론트엔드 > 프로젝트 구성에 webpack+vue2 사용

프로젝트 구성에 webpack+vue2 사용

亚连원래의: 2018-06-12 18:03:451999검색

이 글에서는 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"를 추가하면 packge.json에 기록이 남으므로 끝에 "--D"를 추가합니다. 다른 시스템에서 프로젝트를 열면 개발 중에 npm을 통해 설치된 종속성을 사용할 수 없다는 것을 알 수 있습니다. 이는 시스템 호환성 때문입니다. 그리고 프로젝트 개발 시 설치 종속성에 "--D"를 추가하면 프로젝트의 node_modules를 복사할 필요 없이 프로젝트를 열기 전에 npm을 통해 모든 종속성을 설치하기만 하면 됩니다.

$ npm i

webpack.config.js 파일 구성

모든 웹팩 구성은 webpack.config.js 파일에 있으므로 프로젝트 초기화 후 새로운 webpack.config.js 파일을 생성하고 구성해야 합니다. 지난번에 webpack의 기본 구성에 대해 썼기 때문에 여기서는 반복하지 않겠습니다. 구성 코드를 직접 붙여넣겠습니다:

module.exports = {

 entry: &#39;./src/main.js&#39;,

 output:{

  path: __dirname + &#39;/dist/&#39;,

  filename: &#39;bundle.js&#39;

 },

 devtool:&#39;source-map&#39;,

 devServer:{

  // 主要改变项目的根目录

  contentBase: __dirname + &#39;/dist/&#39;,

  port:8080,

  inline:true

 },

 module:{

  loaders:[

   {test:/\.css$/,loader :&#39;style-loader!css-loader&#39;},

   {test:/\.js$/, loader:&#39;babel-loader&#39;,exclude:/node_modules/},

   { test: /\.vue$/, loader: &#39;vue-loader&#39; }

  ]

 },

 //vue文件想要解析必须要要加上这句才能成功

 resolve: { alias: { &#39;vue&#39;: &#39;vue/dist/vue.js&#39; } }

}

Configuration package.json

에서 구성해야 하는 주요 프로젝트 시작 명령 package.json은 개발 모드 시작 및 패키지 프로젝트 빌드입니다.

프로젝트 시작

$ npm start

프로젝트 패키징

$ npm run build

전체 프로젝트 디렉터리

src: 우리가 개발하는 소스 파일이 이 디렉터리에 위치합니다.

컴포넌트: 모든 컴포넌트를 저장하는 데 사용됩니다

styles: 모든 스타일 파일 저장

utils: 직접 작성해야 하는 모든 메소드 함수 저장

app.vue: 모든 vue 파일에 대한 항목 파일

main.js: 전체 프로젝트에 대한 JS 항목 파일

index .html: 이 파일은 실제 프로젝트 myApp의 루트 디렉터리에 위치하거나 webpack 패키징으로 생성된 dist 디렉터리에 위치할 수 있습니다. 루트 디렉터리에 있는 경우 webpack.config.js의 contentBase: __dirname입니다. dist에 있고 contentBase : __dirname + '/dist/'입니다. 주요 목적은 프로젝트의 서비스 루트 디렉터리(localhos:8080을 열 때 브라우저에 표시되는 디렉터리)의 위치를 변경하는 것입니다. (테스트 후 패키지에서 생성된 dist 디렉터리에 두는 것이 더 좋을 것입니다. 주로 개발 모드에서 실시간 업데이트를 달성할 수 있습니다. 정확하지 않을 수 있습니다. 나중에 테스트한 후 수정하세요)

index.html 파일 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 파일 code

//引入vue框架<br>
//import是es6的写法，其实和var Vue = require(&#39;vue&#39;)是相同的意义<br>import Vue from &#39;vue&#39;;<br>
//引入App.vue文件，这个文件也是vue所有组件的入口，我们的项目就是将这个文件追加到index.html文件里面
import App from &#39;./App.vue&#39;;
new Vue({
 el:&#39;#app&#39;,
 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을 입력하면 다음과 같은 화면이 표시됩니다.

위는 제가 모두를 위해 컴파일한 것입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

프로젝트 구성에 webpack+vue2 사용

관련 기사