Webpack入門の4:自分のVue+Vue-Routerプロジェクトを手動で構築する

Webpack+Vue+Vue-Routerに基づいてフロントエンド開発環境を構築
先端開発の一歩一歩の発展は多くのツール、コンポーネント、足場を生み出し、メリットは確かにプロジェクトの迅速な構築を便利にしたが、害も大きい:ツールを使い慣れたかもしれないし、開発したかもしれないし、2年が過ぎたかもしれないが、基礎原理についてはまだ何も知らない.
例えば、どのように原生domでインタフェースバインドイベントを操作するかを学んでいないので、Vueを使い始めました.例えばWebpackの解決した時間開発問題を感知する前にVue-cliを使うのも同じだ.
本編では、最も簡単な例から、Webpack+Vue+Vue-Routerに基づいてプロジェクト環境を構成する方法を一歩一歩紹介し、プロジェクト開発の深化に伴ってより段階的な構成を紹介します.
1.準備
基礎的な先端開発知識HTML/JS/CSSは必須であり、Webpackのドキュメントに基づいてConcepts、Guide、Asset Management、Developmentの部分を実践できるはずです.
2.初期化

mkdir simplest-webpack-vue
cd simplest-webpack-vue
npm init -y
npm install -D webpack webpack-cli webpack-dev-server

この場合のプロジェクト構造は次のとおりです.

simplest-webpack-vue
  - dist
    - index.html
  - src
    - main.js
  - packge.json
  - webpack.config.js

webpack-config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/main.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: './dist'
  }
};

main.js

var ele = document.createElement('div');
ele.innerText = 'hello';
document.body.append(ele);

index.html

3. Vue
vue-loaderを して、vuevue-loadervue-template-compilerをインストールします. に、webpack.config.jsにvue-loaderを する.
WebpackがJS のファイルをロードすると、 されたrulesの に されるため、 なvueファイルではtemplateラップのhtmlコンテンツの なほか、 export default { data() { return {msg} } }
src/main.js

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');

実行npm run startを実行すると、HTMLはJSからの変数をレンダリングし、色がCSS赤色に適用されていることがわかります.
3.集積Vue-Router
まずインストールvue-router

npm install -D vue-router

必要なファイルの変更と新規作成を続行します.フォルダ構造図は次のとおりです.

simplest-webpack-vue
  - dist
    - index.html
  - src
    - components
      - Home.vue
      - Products.vue
    - js
      - common
        - router-config.js
    - App.vue
    - main.js
  - packge.json
  - webpack.config.js

webpack.config.js

module.exports = {

  resolve: {
    alias: {
      cp: path.resolve(__dirname, 'src/components/'),
      js: path.resolve(__dirname, 'src/js/'),
      css: path.resolve(__dirname, 'src/css/')
    }
  },
  
}  

src/main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import RouterConfig from 'js/common/router-config.js';

import App from './App.vue';

Vue.use(VueRouter)

new Vue({
  render: h => h(App),
  router: new VueRouter(RouterConfig)
}).$mount('#app');

js/common/router-config.js

import Home from "cp/Home.vue";
import Products from "cp/Products.vue";

export default {
  routes: [{
    name: 'home', path: '/', component: Home
  },{
    name: 'products', path: '/products', component: Products
  }]
}

src/App.vue

src/components/Home.vue

src/components/Products.vue

実行npm npm run startは、/および/productsを切り替えることによって、異なるコンテンツのレンダリングに成功したことを見ることができる.