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

Logo

前往低代码交流专区

更多推荐