Vue.js项目搭建与配置-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

创建空白文件夹UWO

$ mkdir uwo
$ cd uwo/

创建package.json文件

$ npm init

创建index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue Example</title>
  </head>
  <body>
    <h3>{{ message }}</h3>
    <script src="dist/build.js"></script>
  </body>
</html>

创建main.js 文件

import Vue from 'vue'

new Vue({
  el: 'body',
  data: {
    message: "Hello Vue"
  }
})

创建webpack.config.js配置文件

module.exports = {
  // 这是一个主文件包括其他模块
  entry: './src/main.js',
  // 编译的文件路径
  output: {
    //`dist`文件夹
    path: './dist',
    // 文件 `build.js` 即 dist/build.js
    filename: 'build.js'
  },
  module: {
    // 一些特定的编译规则
    loaders: [
      {
        // 让webpack去验证文件是否是.js结尾将其转换
        test: /\.js$/,
        // 通过babel转换
        loader: 'babel',
        // 不用转换的node_modules文件夹
        exclude: /node_modules/
      }
    ]
  }
}

创建.babelrc Babel工具主要转换ES6到javascript

{
 "presets": ["es2015", "stage-0"],
 "plugins": ["transform-runtime"]
}

安装库

$ npm install babel-core --save-dev
$ npm install babel-loader --save-dev
$ npm install babel-plugin-transform-runtime --save-dev
$ npm install babel-preset-es2015 --save-dev
$ npm install babel-preset-stage-0 --save-dev
$ npm install babel-runtime --save-dev
$ npm install webpack --save-dev
$ npm install css-loader --save-dev
$ npm install style-loader --save-dev
$ npm install vue-loader --save-dev
$ npm install vue-html-loader --save-dev

打包

$ webpack

热更新库

$ npm install vue-hot-reload-api --save-dev

启动人更新

webpack-dev-server --inline --hot

转载于:https://my.oschina.net/yan5845hao/blog/749277

VUE项目搭建