快速搭建vue环境

刚刚开始学习vue,由于经常在两台电脑切换,第一台电脑上是跟着学习视频搭建的,第二台电脑上自己独立搭建遇到些“小问题”,记录此文以备不时之需,也希望能够帮到初学者们

  1. 安装node (略)
  2. 安装vue
    1. npm install vue –save-dev
  3. 安装webpack
    1. npm install webpack –save-dev
    2. webpack配置(见下方webpack-dev-serve)
  4. 安装webpack-dev-server
    1. npm install web-dev-server –save-dev
    2. 配置文件webpack.config.js
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    var webpack=require("webpack");
    module.exports =
    {
        entry:
        {
            "index":[__dirname+'/src/jssrc/index.js',,'webpack-dev-server/client?http://127.0.0.1:8080']
        },
        output: {
            publicPath: "http://127.0.0.1:8080/",
            path: __dirname+'/src/webapp/js',  //输出文件夹
            filename:'[name].js'   //最终打包生成的文件名(just 文件名,不带路径的哦)
        },
        /*devServer:{
            historyApiFallback:true,
            hot:true,
            inline:true,
            progress:true,
            port:9090 //端口你可以自定义
        },*/
        resolve: {
            alias: {
                vue: 'vue/dist/vue.js'
            }
        },
        externals: {
    
        },
        module:{
            loaders:[
                {test:/\.js$/,loader:"babel",query:{compact:true}},
                {test:/\.vue$/,loader:"babel!vue", exclude: "/node_modules/"}
            ]
        },
        plugins:[
            new HtmlWebpackPlugin({
                // filename: __dirname+'/src/webapp/index.html',//目标文件
                filename:"index.html",//使用webpack-dev-server时配置
                template: __dirname+'/src/html/index.html',//模板文件
                inject:'body',
                hash:true,
                chunks:["index"]
            })
    
        ]
    
    }
    
    
  5. 安装html-webpack-plugin
    1. npm install html-webpack-plugin –save-dev
  6. 安装babel
    1. npm install babel-cli babel-loader babel-preset-es2015 –save-dev
    2. babel 配置 .babelrc
      javascript
      {
      "presets": ["es2015"] //解析规则为es2015
      }
  7. 可能会用到的两个步骤
    1. npm install vue-loader –save-dev
    2. npm install vue-template-compiler –save-dev
  8. package.json中配置script
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "webpackRun": "webpack",
        "webpackServer": "webpack-dev-server --inline --hot --content-base ./src/webapp" --config ./webpack.config.js
      }
    
    

创作不易,转载请注明文章来源为www.full-satcker.com:邢桂帅 » 快速搭建vue环境

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址