TypeScript和vuejs 搭建webpack，初次体验

决定改TypeScript开发
TypeScript好，vuejs也好，二者结合实践一下，网上一搜：https://github.com/Microsoft/...，刚好有。以后就用TypeScript搞了。下面我把所有过程写下，如有问题可以再文后留言，我详解一下。或者加我群探讨：点此处直接加群，或者：478694438

第一步：初始化项目
cnpm init

第二步：安装依赖

npm install https://github.com/DanielRosenwasser/vue#540a38fb21adb7a7bc394c65e23e6cffb36cd867

npm install --save-dev typescript webpack ts-loader css-loader vue-loader vue-template-compiler@2.2.1

第三步：tsconfig.json
根目录下新建tsconfig.json，内容：

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5"
    },
    "include": [
        "./src/**/*"
    ]
}

第四步：根目录下添加webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './index.ts',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {

            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  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([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

第五步:修改package.json

"scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

第六步：新建index.ts


import Vue from "vue";

let v = new Vue({
    el: "#app",
    template: `
    <div>
        <div>Hello {{name}}!</div>
        Name: <input v-model="name" type="text">
    </div>`,
    data: {
        name: "World"
    }
});

第七步：新建index.html

<!doctype html>
<html>
<head></head>

<body>
    <div id="app"></div>
</body>
<script src="./build.js"></script>

</html>

第八步：完成
cnpm run build 然后浏览器打开index.html 即可看到效果。最终结果如下图：
图片描述

TypeScript和vuejs 搭建webpack，初次体验

root

引用和评论

如何实现一个楼中楼的评论系统

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号