Vue開發環境搭建

Nodejs與包管理工具安裝：

Windows安裝：

https://nodejs.org/en/

下載安裝包安裝就可以。

 

Ubuntu安裝：

//安裝nodejs
sudo apt-get install nodejs
//安裝包管理工具
sudo apt-get install npm

安裝結果確認：

~/dev/devtest$ node --version
v8.11.1
~/dev/devtest$ npm --version
5.8.0

 

快捷通道（Vue-cli方法）：

    //設置npm倉庫鏡像為國內淘寶鏡像
    npm config set registry https://registry.npm.taobao.org
    //查看配置是否成功
    npm config get registryf
    //全局安裝 webpack
    npm install -g webpack
    //全局安裝 vue-cli
    npm install -g vue-cli
    //創建一個基於webpack模板的項目
    vue init webpack my-project
    
    cd my-project
    npm install
    //這一步看着簡單，實際上都在配置文件里面配好了，可以去研究一下
    npm run dev

自動生成的目錄結構：

手動設置：

1，初始化與安裝WebPack

 

// 進入文件夾，初始化設置
npm init -y

// Webpack和服務器安裝
npm i webpack webpack-cli webpack-dev-server --save-dev

 

2，添加簡單代碼測試

webpack.config.js：

const path = require('path');
module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'bundle.js',
 path: path.join(__dirname, 'dist')
 },
 devServer: {
 contentBase: path.join(__dirname, 'dist')
 },
}

dist/index.html：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
 Hello World
</body>
</html>

src/index.js 空文件

啟動確認：

 npx webpack-dev-server 

 

 

3, 引入Vue

// VUE安裝
npm i vue --save

// VUE單獨文件處理的Loader安裝
npm i vue-loader vue-template-complier vue-style-loader css-loader --save-dev

Vue單文件組件與Loader設置

//webpack.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        'scss': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader'
                        ],
                        'sass': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader?indentedSyntax'
                        ]
                    }
                }
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist')
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    devtool: '#eval-source-map'
}

 

4,Vue單文件組件測試

<!-- dist/index.html-->
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <script src="./bundle.js"></script>
 <title></title>
</head>
<body>
 <div id="app"></div>
</body>
</html>

// src/index.js

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

window.onload = function() {
    new Vue({
        el: '#app',
        template: '<app></app>',
        components: { App }
    })
}

//src/components/App.vue

<template>
    <div>
        <header-component></header-component>
        <p class="blue">This is App component.</p>
    </div>
</template>

<script>
import Header from './Header.vue';

export default {
    components:{
        'header-component':Header
    }
}
</script>

<style>
.blue{
    color: blue;
}
</style>

//src/components/Header.vue

<template>
    <div>
        <p class="title">{{title}}</p>
    </div>
</template>

<script>
export default {
    data:function(){
        return{
            title:'This is Header component'
        }
    }
}
</script>

<style>
.title{
    font-size: 20px;
    font-weight: bold;
}
</style>

啟動服務查看結果：

 

 

webpack.config.js說明：

//修改webpack.config.js
var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './src/main.js', // 項目的入口文件，webpack會從main.js開始，把所有依賴的js都加載打包
    output: {
        path: path.resolve(__dirname, './dist'), // 項目的打包文件路徑
        publicPath: '/dist/', // 通過devServer訪問路徑
        filename: 'build.js' // 打包后的文件名
    },
    devServer: {
        historyApiFallback: true,
        overlay: true
    }
};

//修改package.josn
//webpack-dev-server會自動啟動一個靜態資源web服務器 --hot參數表示啟動熱更新
"scripts": {
    "dev": "webpack-dev-server --open --hot",
    "build": "webpack --progress --hide-modules"
  },

//運行
//瀏覽器自動打開的一個頁面，隨意修改js，瀏覽器會自動刷新
npm run dev

//編譯
npm run build

Load配置說明：

//webpack默認不支持轉碼es6，但是import export這兩個語法卻單獨支持
//webpack默認只支持js的模塊化，如果需要把其他文件也當成模塊引入，就需要相對應的loader解析器//webpack.config.js
var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    devServer: {
        historyApiFallback: true,
        overlay: true
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            }
        ]
    }
};

//匹配后綴名為css的文件,然后分別用css-loader，vue-style-loader去解析 解析器的執行順序是從下往上(先css-loader再vue-style-loader)
//我們這里用vue開發，所以使用vue-style-loader，其他情況使用style-loader

打包發布：

// 對文件進行壓縮，緩存，分離等等優化處理//修改package.json
"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}

//修改webpack.config.js，判斷NODE_ENV為production時，壓縮js代碼
var path = require('path');
var webpack = require('webpack');

module.exports = {
    // 省略...
}

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map';
    module.exports.plugins = (module.exports.plugins || []).concat([
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"'
        }
      }),
      new webpack.optimize.UglifyJsPlugin(),
    ])
  }
  

module: {
        //加載器配置
        loaders: [
            //.css 文件使用 style-loader 和 css-loader 來處理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //.js 文件使用 jsx-loader 來編譯處理
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 來編譯處理
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //圖片文件使用 url-loader 來處理，小於8kb的直接轉為base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    }