vue2-webpack2 フレームワークの構築方法

今回は、vue2-webpack2 フレームワークの構築方法と、vue2-webpack2 フレームワークを構築する際の 注意点 について説明します。以下は実際のケースです。見てみましょう。

react、vue、angular は 3 つのフロントエンド エンジニアリングのアイデアを表しており、3 つの主要なフレームワークを学ぶことは主に、コンポーネント、

ライフ サイクル、一方向のデータ フロー、双方向のバインディング、等フレームワーク以外の開発では、これらの概念を体系的に考える人はほとんどいません。初心者にとっては、多くの概念に触れたことがなく、どこから React、Vue、または Angular プロジェクトを始めればよいのかわかりません。 Vue プロジェクトをゼロから構築し、プロジェクトに取り組みながら Vue のアイデアを学びます。

1. vue を使用したい場合、まず何をすればよいですか?

Vue を学びたい場合は、まず vue 公式 Web サイトにアクセスして入門書を読みます:

https://cn.vuejs.org/v2/guide... をよく見て、今すぐ vue を見てください。 1.X と 2.X がありますが、その違いは非常に良いので、私は断固として 2.X を選択します。

Vue のバージョンを選択した後、Zhihu で Vue フレームワークの構築方法を調べた後、クッキングという優れものを知りました。

クックの目的は、面倒なビルド構成や、プロジェクトごとに大量の開発依存関係をインストールする煩わしさから解放されることです。 webapck をベースとしていますが、より使いやすい設定項目と使いやすい拡張設定メカニズムを備えているため、設定のことを忘れてプロジェクトに集中できます。

うーん、クッキングの公式サイトにとても丁寧な紹介があったので、思い切ってそのチュートリアルに従ってみたのですが、ワンクリック設定環境が非常に使いにくいことが分かりました。終了しましたが、まだクッキングの使い方を学ぶ必要があり、Cookie をローカルにインストールする必要があったため、ブラウザで Web ページにアクセスできましたが、それでも諦めました。

現時点では、プロジェクトを最初からビルドすることしかできません。

2. github 上に新しい vue2-web プロジェクトを作成します。

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

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

次に、プロジェクトがビルドされ、ローカルにクローンが作成されます。

3.npmを初期化します

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

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 を一緒にしないでください。うまくいかない場合は、この穴を踏む必要があります。この穴を探すのに数時間を費やしました。

りー

6. .babelrc ファイルを作成します。

Babel は必須です。ここでは React は使用されませんが、次のプラグイン、flow-vue およびtransform-vue-jsx を含む vue が使用されることに注意してください。

りー

7. package.jsonに起動コマンドを追加します

webpack-dev-server を直接使用して起動すると、どのモジュールが欠落しているかを示す大量のエラーが表示されます。これは簡単です。構成ファイルで参照されている多数のモジュールがプロジェクトにインストールされていないため、モジュールを 1 つインストールするだけです。この時点で1つずつ。

"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改成

<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 中国語 Web サイトの他の関連記事を参照してください。