집 >웹 프론트엔드 >JS 튜토리얼 >Webpack 및 vue2 빌드 vue 프로젝트 뼈대 설명

Webpack 및 vue2 빌드 vue 프로젝트 뼈대 설명

小云云원래의: 2018-01-11 09:32:142099검색

이 글에서는 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: &#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; } }

}

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(&#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 빌드 vue 프로젝트 뼈대 설명

관련 기사