vue.js 项目 环境搭建、打包发布（简版）

Vue 安装方法

 

在安装vue模块插件等前，得先安装node.js，在安装完node.js的情况下；还需安装如下模块；

1．安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org

2．安装webpack     cnpm install webpack -g

3．安装vue脚手架   cnpm install vue-cli -g

 

下面开始创建vue项目             

VueJs操作命令

1. 安装一个框架： vue init webpack-simple vue_test

2. 安装各种模块：cnpm install

3．如使用路由和网络请求 还需安装vue-router和vue-resource

3.1． 安装vue-router ：cnpm install vue-router --save

3.2． 安装vue-resource:  cnpm install vue-resource --save

4. 启动框架：    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-dev

cnpm install css-loader --save-dev

cnpm 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即可

常规正式版 => https://blog.csdn.net/Aimee1608/article/details/81044875#t5