公共組件及腳手架webpack模板

時間 2019-11-16

標籤公共組件腳手架 webpack 模板简体版

原文原文鏈接

1、公共組件的建立和使用

　　前面已經學習vue組件時，瞭解了公共組件，但在腳手架項目中只使用過局部組件。這裏是講解全局組件如何在腳手架項目中去使用。css

一、建立全局組件

　　在src/components/Common/目錄下建立Header.vue組件。html

<template>
    <div class="header">
        我是頭部
    </div>
</template>

<script>
    export default {
        name: "Header",
        data(){
            return{

            };
        },
    };
</script>

<style scoped>

</style>

二、引入和註冊全局組件

　　main.js是整個項目的入口啓動文件。隨後引入和註冊全局組件。vue

// main.js是整個項目的入口啓動文件
// 導入npm下載的模塊
import Vue from 'vue'

// 導入本身編寫的模塊
// 不一樣在於若是是npm下載的from直接寫名稱，本身編寫的模塊 from後接路徑
import App from './App.vue'

// 1.引入全局的組件
import Header from './components/Common/Header.vue'
// 2.註冊全局組件
Vue.component(Header.name, Header);


new Vue({
  el: '#app',
  // DOM直接渲染
  // appendChild()
  render: h => h(App)
})

三、在入口組件中使用全局組件

<template>
    <!-- 組件的頁面結構 -->
    <div id="app">
        <Header/>
        <h3>{{msg}}</h3>
        <div v-html="title"></div>
        <ul>
            <!-- key綁定key的時候，若是數據中有id就綁定id，沒有id綁定index -->
            <li v-for="(item, index) in datas" :key="index">{{item}}</li>
        </ul>
        <!-- 引入首頁, -->
        <Home :text="text" @add="addHandler"/>
    </div>
</template>

四、頁面顯示

2、vue-cli的webpack模板項目

一、建立webpack模板項目

　　打開命令行控制檯執行以下命令：node

$ vue init webpack webpack_project

　　webpack 是項目模板，webpack_project 是項目名稱。webpack

　　命令執行中有以下配置須要選擇：git

　　注意：ESLint必定要關閉，不然編寫代碼時會很是麻煩。建立成功會顯示以下信息：github

二、運行項目實例

　　首先修改package.json文件，在script的dev中添加「--open」配置，這樣在啓動項目時會自動打開項目頁面。web

  "scripts": {
    "dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

　　因爲前面已經默認執行了npm install，完成了依賴安裝。能夠用以下方式啓動實例：vue-router

$ cd webpack_project/
$ npm run dev

　　啓動項目後自動打開項目頁面以下所示：vue-cli

三、項目結構

.
├── build/                      # webpack config files
│   └── ...
├── config/
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── eslintrc            # config file for eslint with extra settings only for unit tests
│   │   ├── index.js            # test build entry file
│   │   ├── jest.conf.js        # Config file when using Jest for unit tests
│   │   └── karma.conf.js       # test runner config file when using Karma for unit tests
│   │   ├── setup.js            # file that runs before Jest runs your unit tests
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .editorconfig               # indentation, spaces/tabs and similar settings for your editor
├── .eslintrc.js                # eslint config
├── .eslintignore               # eslint ignore rules
├── .gitignore                  # sensible defaults for gitignore
├── .postcssrc.js               # postcss config
├── index.html                  # index.html template
├── package.json                # build scripts and dependencies
└── README.md                   # Default README file

（1）build和config目錄

　　build目錄包含開發和生產環境的webpack相關配置。一般不須要觸摸這些文件，除非想自定義webpack加載器。

　　config目錄主要存放配置文件，用於區分開發環境和生產環境的不一樣。

（2）static目錄

　　該目錄是不但願使用webpack處理的靜態資源目錄，它們將直接打包到webpack構建文件的dist目錄下。

（3）webpack模板官方介紹信息

　　https://vuejs-templates.github.io/webpack/

3、項目中集成插件vue-router

　　製做單頁面應用一個是須要vue，另外一個是須要vue-router。因爲前面建立項目時沒有默認安裝vue-router，須要手動安裝。

一、vue-router安裝

$ npm install vue-router -S

　　「-S」表示「--save」，保存到當前項目的依賴頁面。查看package.json文件添加內容顯示以下：

  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.6"
  },

二、引入和使用vue-router

　　main.js是項目的入口文件，主要做用是初始化vue實例並使用須要的插件。所以能夠直接在main.js中引入和使用vue-router。

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
// 模塊化導入，必須讓vue使用此插件
Vue.use(VueRouter);

var router = new VueRouter({  // 等同於這種寫法：Vue.prototype.$router = VueRouter;
  routes:[]
});

Vue.config.productionTip = true;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },   // 掛載子組件
  template: '<App/>'     // 使用子組件
});

　　至關於把vue拋出的router對象掛載到原型的實例上，就能夠在任意組件裏經過繼承性拿到對應的路由，就能夠作一些路由相關的控制。

　　若是在main.js中作路由配置，會讓這個文件愈來愈臃腫。所以會按以下方式改進。

三、改寫配置index.js路由

　　將main.js中vue-router相關內容剪切到新建立的文件/src/router/index.js，做爲整個路由的配置文件：

// 整個路由的配置文件
import Vue from 'vue'
import VueRouter from 'vue-router'
// 模塊化導入，必須讓vue使用此插件
Vue.use(VueRouter);

var router = new VueRouter({  // 等同於這種寫法：Vue.prototype.$router = VueRouter;
  routes:[]
});
export default router;   // 拋出路由對象

　　而後在main.js中引入vue-router掛載到實例化對象中：

import Vue from 'vue'
import App from './App'
import router from './router/index.js'

Vue.config.productionTip = true;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,    // 掛載路由組件
  components: { App },   // 掛載子組件
  template: '<App/>'     // 使用子組件
});

四、vue-router插件使用示例

（1）示例實現

　　首先建立Home組件（components/Home/Home.vue）：

<template>
  <div>我是首頁</div>
</template>

<script>
  export default {
    name: "Home",
    data() {
      return {

      };
    },
  };
</script>

　　而後建立FreeCourse組件（components/FreeCourse/FreeCourse.vue）：

<template>
  <div>我是免費課程</div>
</template>

<script>
  export default {
    name: "FreeCourse",
    data() {
      return {

      };
    },
  }
</script>

　　隨後在index.js中定製路由：

// 整個路由的配置文件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home/Home.vue'
import FreeCourse from '../components/FreeCourse/FreeCourse.vue'

// 模塊化導入，必須讓vue使用此插件
Vue.use(VueRouter);

var router = new VueRouter({  // 等同於這種寫法：Vue.prototype.$router = VueRouter;
  routes:[
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/free',
      name: 'FreeCourse',
      component: FreeCourse
    }
  ]
});
export default router;   // 拋出路由對象

　　最後在App.vue中引入路由導航：

<template>
  <div id="app">
    <router-link to="/">首頁</router-link>
    <router-link to="/free">免費課程</router-link>
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

　　注意：

　　<router-link> 組件支持用戶在具備路由功能的應用中 (點擊) 導航。經過 to 屬性指定目標地址，默認渲染成帶有正確連接的 <a> 標籤，能夠經過配置 tag 屬性生成別的標籤.。另外，當目標路由成功激活時，連接元素自動設置一個表示激活的 CSS 類名。

　　<router-view> 組件是一個 functional 組件，渲染路徑匹配到的視圖組件。<router-view>渲染的組件還能夠內嵌本身的 <router-view>，根據嵌套路徑，渲染嵌套組件。

（2）顯示效果

五、組件引入簡寫配置

（1）後綴不寫的狀況

　　在webpack.base.conf.js文件中，若是配置有以下內容：

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

　　那麼引入vue、js、json文件不須要寫後綴名，/src/router/index.js改寫以下：

// 整個路由的配置文件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home/Home'
import FreeCourse from '../components/FreeCourse/FreeCourse'

// 模塊化導入，必須讓vue使用此插件
Vue.use(VueRouter);

var router = new VueRouter({  // 等同於這種寫法：Vue.prototype.$router = VueRouter;
  routes:[
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/free',
      name: 'FreeCourse',
      component: FreeCourse
    }
  ]
});
export default router;   // 拋出路由對象

（2）用@指定絕對路徑別名

　　在webpack.base.conf.js中添加語句，查看 path.join(__dirname, '..', dir) 的內容：

const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  console.log(path.join(__dirname, '..', dir));  // 輸出：/Users/hqs/WebstormProjects/webpack_project/src
  return path.join(__dirname, '..', dir)
}

　　另外webpack.base.conf.js中指定了@：

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

　　所以能夠使用@來指定絕對路徑別名，改寫/src/router/index.js以下所示：

// 整個路由的配置文件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home/Home'
import FreeCourse from '@/components/FreeCourse/FreeCourse'

// 模塊化導入，必須讓vue使用此插件
Vue.use(VueRouter);

var router = new VueRouter({  // 等同於這種寫法：Vue.prototype.$router = VueRouter;
  routes:[
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/free',
      name: 'FreeCourse',
      component: FreeCourse
    }
  ]
});
export default router;   // 拋出路由對象

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。