初探Vue之環境搭建

最近得閒，想總結總結最近在學習Vue上的一些心得，畢竟做爲新手多寫多練好處多多，話很少說，立刻開始！

---

前端工程化爲開發帶來了不少便利，但實際是，環境的配置也要大費周章一番。我用的是在Node環境下基於webpack來編譯打包的，在package.json中用到的包大體以下：

所下的都是當時線上最新的版本，也是根據本身項目的需求來下載的。Node構建環境搭好後就能夠來寫webpack.config.js了，（至於怎麼初始化Node環境和安裝什麼的，網上一找都有），這裏要注意的是，若是你用的是Sass來寫css的話node-sass有時候會莫名的裝不上，只需用npm install sass-loader node-sass --save-dev這樣就能夠了（用npm安裝的話）
再就是webpack.config.js的配置了，以下

`
  

      var path = require('path'); //這裏引入路徑包
        var webpack = require('webpack'); //引入webpack
        var ExtractTextPlugin = require('extract-text-webpack-plugin');//這個插件是能夠將scss文件獨立抽取編譯爲css文件到指定的目錄下
        var ExtractCss = new ExtractTextPlugin("./[name].css");//[name]是你入口指定的名字
        module.exports = {
             plugins: [
                ExtractCss  //引入插件
            ],
            entry: {
                main: ['./src/main.js'],  //入口文件
                index: ['./src/css/login.scss']
            },
            output: {
                path: path.resolve(__dirname,'./output'), //輸出路徑
                publicPath: '/output/',  //公共文件路徑
                filename: '[name].build.js' //輸出文件名
            },
            module: {  //下面這些是用指定模塊編譯你要的文件
                loaders: [   
                   { test: /\.vue$/, loader: 'vue', exclude: /node_modules/ },
                   { test: /\.html$/, loader: 'html-loader', exclude: /node_modules/ },
                   { 
                       test: /\.js$/, 
                    loader: 'babel',
                       exclude: /node_modules/
                   },
                   { test: /\.css$/, loader: 'style!css!autoprefiexer' },
                   { test: /\.scss$/, loader: ExtractCss.extract(['css', 'sass']) },
                   { test: /\.json$/,loader: 'fild-loader?name=./json/[name].json' },
                   {
                    test: /\.(png|jpg|jpeg|gif)$/,
                    loader: 'url-loader?limit=10000&name=./images/[name].[ext]'
                  }
                ]
            },
            resolve: {
                alias: {
                   'vue$': 'vue/dist/vue.js' //這個是編譯.vue文件的,路徑不用改
                },
                extensions: ['','.js','.vue','.scss']
            },
            babel: {
                presets: ['es2015'] //用es6的語法的話，要額外定義
            }
        }
        
        `

由於我直接擼的是vue2.0的版本，也不知道以前和1.0有什麼不一樣，網上本身找了個教程，結果被坑了很久，就是版本改動後，不少API都不同了，這裏之後要注意，特別是2.0版本的獨立構建和運行構建，具體看這裏 [1]:[http://cn.vuejs.org/v2/guide/...獨立構建-vs-運行時構建]

也是由於alias: { 'vue$': 'vue/dist/vue.js' },別名沒加致使了程序跑不起來。
我用的是vue組件化得方式，每一個頁面都是一個組件，就是.vue的文件。具體的代碼之後再上吧，沒寫徹底。

以上是我學習中的一些小問題，說明不當之處還請高手們多多指教！多多交流