Vue-Router路由Vue-CLI腳手架和模塊化開發之單文件組件

時間 2019-12-10

標籤 vue router 路由 cli 腳手架模塊化開發文件組件欄目系統網絡简体版

原文原文鏈接

單文件組件介紹

vue中的單文件組件是以.vue擴展名結尾的文件，在這個文件中封裝了html、js、css的代碼，它自身是一個獨立的組件，因此成爲單文件組件；css

vue文件結構

因爲.vue封裝了html、js、css的代碼，因此它由如下幾部分組成；html

<template> html </template>前端

vue-loader：

若是使用.vue文件，須要使用指定加載器，不然瀏覽器是不能解析的。加載.vue文件的加載器是 vue-loader；同理，一個項目中還須要html、css等，因此也要用到其對應的加載器例：html-loader、css-loader… vue-loader是基於webpack的，要在webpack中進行配置，因此還要配置webpack；node

webpack：

javaScript應用的靜態模塊打包器；把前端各類資源做爲模塊處理、使用、打包；webpack

官網：點擊前往es6

單文件組件項目結構與依賴安裝

建立項目結構

基於webpack的單文件組件項目基本結構web

一、index.html 基本頁面npm

二、App.vue vue根組件

三、 main.js 入口文件

四、package.json 項目配置文件

五、webpack.config.js webpack配置文件

六、 .babelrc babel配置文件，babel能夠將es6轉成es5

經過管理員窗口使用指令生成package.json 項目配置文件

導入依賴

因爲在開發的過程當中須要使用.vue文件

基於webpack的單文件組件項目須要安裝如下依賴

生產環境

vue：npm install vue -S vue核心庫

開發環境

webpack

npm i webpack -D webpack庫
npm i webpack-cli -D webpack 4.x版本之後須要依賴這個庫
npm i webpack-dev-server -D webpack服務器

Loader

npm i vue-html-loader -D html加載器
npm i css-loader -D css加載器
npm i vue-style-loader -D style加載器
npm i vue-loader -D vue加載器

template

npm i vue-template-compiler -D 預編譯模版

babel

npm i @babel/core -D babel核心庫若是babel-loader 爲8.x 那麼須要使用@babel/core安裝7.x的core
npm i babel-loader -D babel編譯js
npm i babel-preset-env -D babel插件自動檢測 (須要根據配置的運行環境)

安裝完package.json的最終效果：

附：須要按照順序一個一個進行安裝，預防後面的依賴前面的包

配置單文件項目並運行

main.js

import Vue from 'vue'//引入內置模塊

import App from './app.vue'//引入自定義模塊

new Vue({
    
    el:'#app',
    //使用render渲染
    
    render:function(r){
        
        return r(App);
    }
    
    
})

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            
            
            
        </div>
    </body>
    
    
</html>

app.vue

<template>
    
    <h2> 歡迎來到perfect*的博客園！！！</h2>
</template>

<script>
</script>

<style>
</style>

webpack.config.js

const VueLoaderPlugin=require('vue-loader/lib/plugin');
module.exports={
    //1配置入口文件
    entry:'./main.js',
    
    
    
    
    //2配置出口
    output:{
        
        
        path:__dirname,
        filename:'build.js'
    },
    
    
    
    //3配置loader
    
    module:{
rules:[

{
    //.vue
    test:/\.vue$/,
    loader:'vue-loader'

    
},

{
    //js
    test:/\.js$/,
    loader:'babel-loader',
    exclude:'/node_modules/'//排除該目錄

    
},
{
//css
    test:/\.css$/,
    use:[
    'vue-style-loader',
    'css-loader'
    
    ]

    
}



]
},


//4配置插件

plugins:[
  new VueLoaderPlugin()


],

//5設置模式

mode:'development'//開發模式
    
    
    
    
    
}

以後在index.html中的加入：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            
            
            
        </div>
    </body>
    
    <script src="build.js"></script><!--放在head標籤之間找不到項目的掛載點-->
</html>

自定義文件.babelrc

{
        "presets":[
        [
            "env",
            {
                "moudle":false
                }
        ]
    ]
}

package.json中加入：

{
  "name": "simple-file",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server --open --hot --port8088 --config webpack.config.js --mode development"
  },

在管理員窗口輸入npm run dev 進行運行該項目：

最終效果：

能夠在app.vue中添加js代碼，在控制檯打印出內容，以及修改其樣式

app..vue

<template>
    
    <h2> 歡迎來到perfect*的博客園！！！</h2>
</template>

<script>
    console.log('歡迎來到perfect*的博客園')
</script>

<style>
    
    h2{
        
        color: red;
    }
</style>