English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

vueシリーズ——vue2-webpack2フレームワーク構築の失敗体験

react、vue、angularは3の前工程化の思想を持っています。三大フレームワークを学ぶ主な目的は、その核心概念を理解することです。例えば、コンポーネント、ライフサイクル、一方向データフロー、二方向バインディングなどです。これらの概念は、フレームワーク外の開発ではほとんど人がこれのように体系的に考えないため、初心者にとって多くの概念は未知のものです。react、vue、angularプロジェクトにどのように手を付けるか分からない場合も多く、以下ではゼロからvueプロジェクトを構築し、プロジェクトを進める中でvueの思想を学びます。

1、vueを使用するにはまずどうすればいいのでしょうか？

vueを学びたい場合は、まずvueウェブサイトの紹介を見るべきです：https://cn.vuejs.org/v2/guide...を見て、vueは現在1.Xと2の違いがわかりました。良いので、2.X

vueのバージョンを選択し、Zhihuでvueフレームワークの構築方法を検索し、先輩たちの様々なシェアを見て、 cooking の素晴らしいもの、どこが良いのでしょうか？

cookingの目標は、あなたを複雑な構築設定から解放し、各プロジェクトに必要な開発依存関係を一式インストールする手間を省くことです。webapckに基づいていますが、よりフレンドリーな設定項目と使いやすい拡張設定メカニズムを提供し、プロジェクトに集中して設定を忘れることができます。

cookingのウェブサイトで紹介されているように非常に良いと感じ、そのチュートリアルに従って試してみましたが、使いづらいと感じました。一押しで環境を設定するのは非常に派手ですが、cookingの使い方を学ぶ必要があり、ローカルにcookingをインストールする必要があります。結果的に頭が混乱し、ブラウザでウェブページにアクセスできたものの、この面白いものを放棄しました。

この時点では、0からプロジェクトを構築するしかありません。

2、githubで新しいvueを作成する2-webプロジェクト。

githubのホームページを開き、「プロジェクトを開始する」をクリックします。

次に「新しいリポジトリを作成する」と表示されますが、プロジェクト情報を入力する必要があります。このステップはスキップします。

それではプロジェクトが完成しました。ローカルにクローンします。

3、npmを初期化する

shellまたはcmdを使用してプロジェクトのルートディレクトリに入り、以下のコマンドを実行します。オプションはスキップして、最終的にpackage.jsonファイルが生成されます。

npm init

4、webpackをインストールする

webpackがなければ生きられないような感じですが、webpackの設定も大変難しいので、覚えるのが困難です。しかし心配しないで、私はこのステップをすでに解決しました。私たちは皆webpackを使用する必要があります。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$/、.babelrcファイルを作成
   use: ['babel-node_modules
   , /include: resolve('src')/、.babelrcファイルを作成
   babelは欠かせません、ここではreactを使用していないので、vueを使用します。以下のプラグインも含まれます、flow
  },{
   test: /loader/、.babelrcファイルを作成
   exclude:-node_modules
   , /include: resolve('src')/、.babelrcファイルを作成
   babelは欠かせません、ここではreactを使用していないので、vueを使用します。以下のプラグインも含まれます、flow
  },

6vue、transform

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

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

7、package.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を付けて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>
  <app-header logo="logo" ></app-header>
  <app-nav></app-nav>
  <transition name="fade" mode="out-in">
   <router-<view class="view"></router-<view>
  </<transition>
 </<div>
</<template>
<script>
 import Header from './components/common/Header.vue';
 import Nav from './components/common/Nav.vue';
 import Home from './components/home/Home.vue';
 export default {
  name: 'App',
  components: {
   "app-header": Header,
   "app-nav": Nav,
   "app-home": Home
  }
 };
</<script>
<style>
 body, html {
  font-size: 12px;
  margin: 0;
  padding: 0;
 }
</style>

壁にぶつかっている最中に、いくつかのエラーシナリオも発生しましたが、最終的にはすべて解決しました。

詳細なvueコンポーネントコードを確認したい場合は、以下のプロジェクトを参照してください：https://github.com/hyy1115/vu...

今後、このプロジェクトをさらに完成させ、より柔軟なvueアーキテクチャの実現を探求します。

実行イメージ:vue-酷我demo

まとめ

以下は、編集者が皆様に紹介するvueシリーズです——vue2-webpack2フレームワークの構築で壁にぶつかってみました。皆様に役立つことを願っています。何かご不明な点がございましたら、コメントを残してください。編集者は皆様の質問に迅速に回答します。この教材のサポートに感謝しています。

基本教程
おすすめ