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脚手架   npm install vue-cli -g

 

下面开始创建vue项目             

VueJs操作命令

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

2. 安装各种模块：cnpm install

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

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

2． 安装vue-resource  cnpm installvue-resource --save

4. 启动框架：    cnpm run dev

 

使用element-ui 插件

1． 安装element-ui: npm 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即可