vue單文件組件1（webpack打包）

一、vue單文件組件開發流程（webpack打包）

1）源文件目錄結構

2）package.json

3）webpack.config.js

　　HTML Webpack Plugin依據html模板生成一個自動引用你打包后的文件（js或css）的新的html頁面，新文件默認名稱為index.html。

　　運行.vue文件，需要依賴vue、vue-loader、vue-template-compiler這三個包。

　　處理文件（圖片）：file-loader、url-loader

　　壓縮圖片：image-webpack-loader

4）index.html

5）app.js（應用入口文件）

Vue 選項中的 render 函數若存在，則 Vue 構造函數不會從 template 選項或通過 el 選項指定的掛載元素中提取出的 HTML 模板編譯渲染函數。

6）app.vue

7），生成dist

8）運行dist/index.html效果

 

一，環境搭建

1）package.json文件

每個項目的根目錄下面，一般都有一個package.json文件，定義了這個項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數據）。npm install命令根據這個配置文件，自動下載所需的模塊，也就是配置項目所需的運行和開發環境。

2）有了package.json文件，直接使用npm install命令，就會在當前目錄中安裝所需要的模塊。

3）安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

三，vue單文件組件（webpack打包）

1）在現代 UI 開發中，我們已經發現相比於把代碼庫分離成三個大的層次並將其相互交織起來，把它們划分為松散耦合的組件再將其組合起來更合理一些。在一個組件里，其模板、邏輯和樣式是內部耦合的，並且把他們搭配在一起實際上使得組件更加內聚且更可維護。

2）在 Webpack中，每個模塊被打包到 bundle 之前都由一個相應的 “loader” 來轉換，Vue 也提供 vue-loader 插件來執行 .vue 單文件組件 的轉換. 

3）a，cnpm install -g vue-cli（vue-cli 是一個官方發布 vue.js 項目腳手架，使用 vue-cli 可以快速創建 vue 項目，安裝vue-cli）

b，vue init webpack-simple hello-vue（使用vue-cli初始化項目）

c，cd hello-vue（進入項目目錄） -> cnpm install（安裝依賴） -> npm run dev（啟動項目）

4）如果一個模塊不在package.json文件之中，可以單獨安裝這個模塊，並使用相應的參數，將其寫入package.json文件之中。

cnpm install vuex vue-resource --save（--save參數表示將模塊寫入dependencies屬性）

cnpm install clean-webpack-plugin html-webpack-plugin vue vue-router vuex --save-dev（--save-dev表示將模塊寫入devDependencies屬性）

5）webpack.config.js

module.exports = {
    entry: {
        vendor: ["Vue", "Vuex", "vue-router"],
        app: "./src/js/app.js",
    },
    output: {
        path: path.resolve("production"),
        filename: "js/[name].bundle.js",
    },
    plugins: [ //插件
　　　　 //要使用某個插件，我們需要通過npm安裝它 new CleanWebpackPlugin([path.resolve(__dirname, 'production')]),
　　　　 //依據一個簡單的模板，幫你生成最終的Html5文件，這個文件中自動引用了你打包后的JS文件 new HtmlWebpackPlugin({
            title: "招管家",
            template: path.resolve(__dirname, 'src/index.html')
        })
    ],
    devServer: { //本地開發服務器
         contentBase: './production',
　　　　　port: 9001 //監聽端口
    },
}

打包前　　　　　　　　　　　　打包后

         

webpack

//webpack.config.js
const path = require("path");
const htmlWebpackPlugin=require('html-webpack-plugin');

module.exports = {
    //entry: './src/script/main.js',
    //entry: ['./src/script/main.js','./src/script/a.js'],
    entry: {
        main: './src/script/main.js',
        a: ['./src/script/a.js'],
        b: ['./src/script/b.js']
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[name].bundle.js'
    },
    plugins: [
        new htmlWebpackPlugin({
            title: 'index.html',
            chunks:['main']
        }),
        new htmlWebpackPlugin({
            title: 'a.html',
            template: 'src/htmls/a.html',
            filename: 'htmls/a.html',
            chunks:['a']
        }),
        new htmlWebpackPlugin({
            title: 'b.html',
            template: 'src/htmls/b.html',
            filename: 'htmls/b.html',
            chunks:['b']
        }),
    ]
}