vue.js 项目 环境搭建、打包发布

Vue 安装方法            
在安装vue模块插件等前，得先安装node.js，在安装完node.js的情况下；还需安装如下模块；1．安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org2．安装webpack     cnpm install webpack -g3．安装vue脚手架   npm install vue-cli -g 下面开始创建vue项目             VueJs操作命令1. 安装一个框架： vue init webpack-simple vue_test2. 安装各种模块：cnpm install3．如使用路由和网络请求 还需安装vue-router和vue-resource1． 安装vue-router ：c
4000
npm install vue-router --save2． 安装vue-resource:  cnpm install vue-resource --save4. 启动框架：    cnpm run dev 使用element-ui 插件1． 安装element-ui: cnpm install element-ui --save注：

cnpm install模块名--save-dev(关于环境的，表现为npmrun dev 启动不了)cnpm install模块名 --save(关于项目的，比如main.js，表现为npm run dev 成功之后控制台报错)-S是简写2.由于webpack打包时无法识别css，得安装以下模块，让webpack可以解析css文件cnpm install style-loader --save-devcnpm install css-loader --save-devcnpm install file-loader --save-dev  3.在 

webpack.config.js

 中的 loaders 数组加入以下配置，记得该加逗号的地方加逗号!{    test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.css$/,    loader: "style!css"},{    test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\?]?.*)$/,    loader: "file"}

修改完的 

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'  },  resolveLoader: {    root:path.join(__dirname, 'node_modules'),  },  module: {    loaders: [      {        test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.vue$/,        loader: 'vue'      },      {        test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.js$/,        loader: 'babel',        exclude: /node_modules/      },      {          test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.css$/,          loader: "style!css"      },      {        test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\?]?.*)$/,        loader: "file"      },      {        test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(png|jpg|gif|svg)$/,        loader: 'file',        query: {          name: '[name].[ext]?[hash]'        }      }    ]  },  resolve: {    alias: {vue: 'vue/dist/vue.js'}  },  devServer: {    historyApiFallback:true,    noInfo: true  },  devtool: '#eval-source-map'} if (process.env.NODE_ENV === 'production') {  module.exports.devtool= '#source-map'  //http://vue-loader.vuejs.org/en/workflow/production.html  module.exports.plugins= (module.exports.plugins || []).concat([    newwebpack.DefinePlugin({      'process.env':{        NODE_ENV: '"production"'      }    }),    newwebpack.optimize.UglifyJsPlugin({      compress: {        warnings: false      }    })  ])}

项目打包本地写完项目后，Vue.js项目打包，使之能在服务器上访问打包命令 npm run build 如若出现ERROR in build.js from UglifyJs报错，可用 webpack命令直接打包webpack --color  --progress 生成的文件夹dist即可