脚本宝典收集整理的这篇文章主要介绍了初探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的文件。具体的代码以后再上吧，没写完全。

以上是我学习中的一些小问题，说明不当之处还请高手们多多指教！多多交流

脚本宝典总结

以上是脚本宝典为你收集整理的初探Vue之环境搭建全部内容，希望文章能够帮你解决初探Vue之环境搭建所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。