vue2-webpack2 프레임워크를 구축하는 방법

이번에는 vue2-webpack2 프레임워크를 빌드하는 방법과 vue2-webpack2 프레임워크를 빌드할 때 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

react, vue 및 angle은 세 가지 프런트 엔드 엔지니어링 아이디어를 나타냅니다. 세 가지 주요 프레임워크를 학습하는 것은 주로 구성 요소, 라이프 사이클, 단방향 데이터 흐름, 양방향 바인딩과 같은 핵심 개념을 이해하는 것입니다. 등. 프레임워크가 아닌 개발에서는 이러한 개념에 대해 이렇게 체계적인 방식으로 생각하는 사람이 거의 없습니다. 초보자의 경우 많은 개념에 노출된 적이 없으며 어디서부터 React, Vue 또는 Angle 프로젝트를 시작해야 할지 모릅니다. Vue 프로젝트를 처음부터 빌드하고 프로젝트 작업을 하면서 Vue의 아이디어를 배워보세요.

1. vue를 사용하려면 먼저 무엇을 해야 하나요?

Vue를 배우고 싶다면 가장 먼저 Vue 공식 웹사이트에 가서 소개를 읽어보세요: https://cn.vuejs.org/v2/guide... 자세히 살펴보세요, 지금 vue 1.X와 2.X가 있는데 차이가 너무 커서 과감히 2.X를 선택합니다.

vue 버전을 선택한 후 vue 프레임워크를 구축하는 방법에 대해 Zhihu를 검색했는데, 선배님들의 다양한 공유를 읽은 후 요리라는 좋은 점에 대해 배웠습니다.

쿠킹의 목표는 지루한 빌드 구성과 각 프로젝트에 대한 여러 개발 종속성을 설치하는 번거로움에서 벗어나는 것입니다. webapck를 기반으로 하지만 보다 친숙한 구성 항목과 사용하기 쉬운 확장 구성 메커니즘을 통해 구성을 잊고 프로젝트에 집중할 수 있습니다.

와, 공식 홈페이지에 이렇게 소개가 잘 되어 있는 걸 보고 과감히 튜토리얼을 따라해 보았는데, 원클릭 구성 환경이 너무 높아서 사용하기 불편하더군요. 결국 요리 사용법을 배워야 하고, 쿠키를 로컬에 설치해야 해서 브라우저에서 웹 페이지에 접속하는데 성공했지만 여전히 이 좋은 것을 포기했습니다.

현재로서는 처음부터 프로젝트만 빌드할 수 있습니다.

2.github에서 새로운 vue2-web 프로젝트를 생성하세요.

github 홈페이지를 열고 프로젝트 시작을 클릭하세요.

그러면 프로젝트 정보를 입력해야 하는 새 저장소 만들기가 표시됩니다. 이 단계는 건너뜁니다.

그런 다음 프로젝트가 로컬로 빌드되고 복제됩니다.

3. npm을 초기화하세요

shell이나 cmd를 이용하여 프로젝트 루트 디렉터리에 들어가서 다음 명령어를 실행하고 옵션을 직접 건너뛰면 최종적으로 package.json 파일이 생성됩니다.

npm 초기화npm init

4、安装webpack

没有webpack就活不下去的感觉，但是配置webpack也会让人活不下去，太难记住webpack的配置项了，不过别担心，我已经帮你搞定这一步了，咋们都必须使用webpack2啊。

npm install --save-dev webpack

还需要前端服务器，做热更新呀，webpack-dev-server登场。

npm install --save-dev webpack-dev-server

5、创建webpack.config.js文件

和react中的webpack配置文件没什么区别，只是稍微改动一个地方即可移植过来使用。

千万不要把js和vue放到一起，不起作用的，必须分开，必须，这个坑我已经踩过了，为了找这个坑，浪费了我好几个小时，最最最隐蔽的一个地方。

rules: [{
   test: /\.js$/,
   use: ['babel-loader'],
   exclude: /node_modules/,
   include: resolve('src')
  },{
   test: /\.vue$/,
   use: ['vue-loader'],
   exclude: /node_modules/,
   include: resolve('src')
  },

6、创建.babelrc文件。

babel少不了，注意这里不是用react了，而是vue，包括下面几个插件，flow-vue、transform-vue-jsx。

{
 "presets": ["es2015", "flow-vue", "stage-0", "stage-2"],
 "plugins": ["transform-vue-jsx"],
 "comments": false,
 "env": {
 "production": {
  "plugins": [
  ["transform-runtime", { "polyfill": false, "regenerator": false }]
  ]
 }
 }
}

7、在package.json添加start命令

直接使用webpack-dev-server启动，哇塞，一堆报错，说少了哪个module，这个简单，因为配置文件里面引用的一堆module，还没有安装到项目呢，这时候一个个安装好就行了。

"start": "webpack-dev-server",

4. 웹팩 설치

webpack 없이는 살 수 없을 것 같은 느낌이 들지만, webpack을 구성하면 살 수 없게 됩니다. webpack의 구성 항목을 기억하는 것은 너무 어렵지만 걱정하지 마세요. 이 단계를 완료할 수 있도록 제가 도와드렸습니다. webpack2를 사용해야 합니다. 🎜🎜 npm install --save-dev 웹팩🎜🎜 핫 업데이트를 위해서는 프런트엔드 서버도 필요하며 webpack-dev-server가 나타납니다. 🎜🎜 npm install --save-dev webpack-dev-server🎜🎜 🎜🎜5. webpack.config.js 파일을 생성하세요🎜🎜🎜🎜 React의 webpack 구성 파일과 다르지 않습니다. 약간의 변경만으로 이식하여 사용할 수 있습니다. 🎜🎜 js와 vue를 함께 넣지 마세요. 작동하지 않으면 분리해야 합니다. 가장 숨겨진 곳에서 이 구덩이를 찾는 데 몇 시간을 낭비해야 합니다. 🎜rreee🎜 🎜🎜6.babelrc 파일을 생성합니다. 🎜🎜🎜🎜 Babel은 필수입니다. 여기서는 React가 아니라 다음 플러그인인 flow-vue 및Transform-vue-jsx를 포함한 vue를 사용한다는 점에 유의하세요. 🎜rreee🎜 🎜🎜7. package.json🎜🎜🎜🎜에 시작 명령을 추가합니다. webpack-dev-server를 직접 사용하여 시작하세요. 와, 어떤 모듈이 빠졌는지 알려주는 많은 오류가 발생합니다. 구성 파일에서 참조된 여러 모듈이 프로젝트에 설치되지 않았기 때문에 간단합니다. 따라서 하나만 설치하면 됩니다. 이 시간에 하나씩. 🎜🎜 "시작": "webpack-dev-server",🎜🎜 🎜🎜8. 프로젝트 입구 main.js 파일. 🎜🎜🎜

这个文件名自己喜欢咋取就咋取，代码挺简单的，实例化一个Vue和路由，是不是和react的入口文件很像？当然，我做的是SPA，所以采用单入口的形式，如果是非SPA模式，就不是这种配置方式了。

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import routes from './routes';
import VueResource from 'vue-resource';
Vue.use(VueResource); //http请求注册
Vue.use(VueRouter); //路由注册
// 实例化路由
const router = new VueRouter({
 // mode: 'history', //H5 路由模式，需要服务端做渲染防止404错误
 base: dirname,
 linkActiveClass: 'on',
 routes
})
let render = new Vue({
 router,
 el: '#app',
 render: h => h(App)
});
render;
// if (module.hot) {
//  非必须
//  module.hot.accept('./App.vue', () => render);
// }

9、路由routes.js

路由和react也非常像（简直一样好不），这里的vue页面采用.vue后缀的方式来写。

import Home from './components/home/Home.vue';
import Bang from './components/bang/Bang.vue';
export default [
 {
  path: '/',
  redirect: 'home'
 },
 {
  path: '/home',
  component: Home
 },
 {
  path: '/bang',
  component: Bang
 }
]

10、单页顶层容器App.vue

从index进来，就是这个文件，现在开始学习vue的精华。

template：vue的模板语言，也叫作jsx。

transition：过渡动画。

router-view：路由显示容器，通过router-link跳转加载的.vue会在这个容器渲染。router-link被我封装到nav.vue组件里面了。

script：导入了当前顶级容器需要用到的vue组件，包括头部、导航、首页。还有更多丰富的设置我没有研究，后续的学习中会深入下去。

style: 当前组件的样式，我配置了less语法支持。将style改成

<template>
 <p>
  <app-header></app-header>
  <app-nav></app-nav>
  <transition>
   <router-view></router-view>
  </transition>
 </p>
</template>
<script>
 import Header from &#39;./components/common/Header.vue&#39;;
 import Nav from &#39;./components/common/Nav.vue&#39;;
 import Home from &#39;./components/home/Home.vue&#39;;
 export default {
  name: &#39;App&#39;,
  components: {
   "app-header": Header,
   "app-nav": Nav,
   "app-home": Home
  }
 };
</script>
<style>
 body, html {
  font-size: 12px;
  margin: 0;
  padding: 0;
 }
</style>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue-cli+webpack怎样搭建vue开发环境

原生JS如何对多个滚动条同步操作

mint-ui怎样实现无限滚动加载功能

위 내용은 vue2-webpack2 프레임워크를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!