vue 시리즈——vue2-webpack2프레임워크 구축 시 발생하는 문제 해결 방법

react, vue, angular은3前端工程화의 사고 방식, 주요 프레임워크인 react, vue, angular을 배우는 것은 그들의 핵심 개념을 이해하는 것입니다. 예를 들어, 컴포넌트, 라이프사이클, 일방적 데이터 흐름, 양방향 바인딩 등이며, 이러한 개념은 프레임워크 없는 개발에서는 거의 누구도 이렇게 체계적으로 생각하지 않습니다. 초보자들에게는 많은 개념들이 접촉되지 않았기 때문에, react, vue, angular 프로젝트를 시작하는 방법을 알지 못합니다. 아래에서는 vue 프로젝트를부터 0부터 구축하면서 vue의 사고 방식을 배울 예정입니다.

1vue 사용하기 위해, 저는 어떻게 해야 하나요?

vue를 배우기 위해, 저는 먼저 vue 웹사이트의 소개를 보러 갔어요:https://cn.vuejs.org/v2/guide...를 꼼꼼히 보면, vue는 지금1.X와 "2.X의 차이점을 알고, "2.X

vue 버전을 선택하고, Zhihu에서 vue 프레임워크 구축 방법을 검색했고, 이전자들의 다양한 공유를 본 후, " cooking 의 좋은 물건, 무엇이 좋은지요?

cooking의 목표는 귀하를 복잡한 빌드 설정에서 해방시키고, 또한 각 프로젝트에서 필요한 개발 의존성을 설치하는 번거로움을 줄입니다. 웹팩을 기반으로 하지만 더 친절한 설정 항목과 쉽게 사용할 수 있는 확장 설정 기계를 제공하여, 프로젝트에 집중하고 설정을 잊을 수 있게 합니다.

cooking 웹사이트에서 그렇게 좋게 소개된 것을 보고, 그 튜토리얼을 따라 해보았어요. 얼마 동안 무모하게 해보았지만, 환경 설정을一键으로 완료하는 것은 매우 화려하게 보이지만, cooking 사용법을 배우기 위해 노력하고, 로컬에 cooking을 설치해야 했기 때문에 시야가 흐려졌어요. 브라우저에서 성공적으로 웹 페이지에 접근했지만, 그런 재미있는 물건을 포기했습니다.

이제 0부터 프로젝트를 자체적으로 구축해야 해요.

2github에서 새로운 vue 프로젝트 생성2-웹 프로젝트.

github 메인 페이지를 엽니다. start a project를 클릭하세요.

그런 다음 'Create a new repository'를 볼 수 있고, 프로젝트 정보를 입력해야 합니다. 이 단계는 건너뛰세요.

그런 다음 프로젝트가 완성되었고, 로컬에 클론됩니다.

3npm 초기화

셸이나 cmd를 사용하여 프로젝트의 루트 디렉토리로 진입하고, 아래의 명령어를 실행하세요. 옵션을 그냥 건너뛰고, 마지막에는 package.json 파일이 생성됩니다.

npm init

4웹팩 설치

웹팩 없이는 살 수 없는 느낌이지만, 웹팩 설정도 살 수 없게 어려워, 웹팩 설정 항목을 기억하는 것이 너무 어려워요. 그러나 걱정 마세요, 저는 이미 이 단계를 해결했어요. 우리는 모두 웹팩을 사용해야 해요.2啊。

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-exclude:
   , /node_modules/,
   babel은 절대 빼지 마세요. 여기서는 react를 사용하지 않습니다. vue를 사용합니다. 아래의 몇 가지 플러그인도 포함됩니다. flow
  },{
   test: /\.vue$/,
   loader-exclude:
   , /node_modules/,
   babel은 절대 빼지 마세요. 여기서는 react를 사용하지 않습니다. vue를 사용합니다. 아래의 몇 가지 플러그인도 포함됩니다. flow
  },

6vue, transform

jsx。-"presets": ["es--"", "flow

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

7package.json에 start 명령어 추가

직접 webpack 사용-dev-서버 시작, 와우, 많은 오류가 발생합니다. 누락된 module이 있습니다. 이는 매우 간단합니다. 왜냐하면 설정 파일에서 참조하는 많은 module이 아직 프로젝트에 설치되지 않았기 때문입니다. 이제 하나씩 설치하면 됩니다.

"start": "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을 <style lang="less">로 변경하면 less를 쓸 수 있습니다.

<template>
 <div>