TypeScript和vuejs 搭建webpack，初次体验

shengguo 发布于2019-08-21 17:39 / 633人阅读

摘要：决定改开发好，也好，二者结合实践一下，网上一搜，刚好有。下面我把所有过程写下，如有问题可以再文后留言，我详解一下。

决定改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: `
    
        Hello {{name}}!
        Name: 
    `,
    data: {
        name: "World"
    }
});

第七步：新建index.html

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

GPU云服务器云服务器 webpack搭建 TypeScript typescript javascript 初次见面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89820.html

【呆萌の体验】vue.js初次体验

摘要：官方默认项目是存放了一个为的打开文件夹有一个，还有一个名为组件的文件夹，里面放了一个文件。部分我们会发现这几排字就是显示在页面的几排文字部分这其中的这个文件引入了，还有上述的。结合查询其他说法，就是说它会把是的元素以形式替换。前言我很早就想来学习学习vue.js啦，终于有了那么一些空闲的时间可以拿来学习，于是从前天开始我就每天抽一个多小时来体验vue.js。当然啦，因为是小白入门，...

wdzgege 2019-08-21 17:21 评论0 收藏0
vue-cli3.0初体验～

摘要：比如传递给时，使用。为所有的及其预处理文件开启。在生产环境下为和使用在多核机器下会默认开启。是否使用分割供应的包也可以是一个在包中引入的依赖的显性的数组。查阅配置行为。之前因为parcel的出现，webpack也跟进了零配置vue-cli自然也不能落下,cli3.0也升级到webpack4，并增加许多新特性安装并创建一个项目支持npm和yarn npm install -g @v...

AlphaWallet 2019-08-22 15:57 评论0 收藏0
Vue Cli3 创建项目

摘要：创建项目安装创建一个项目默认套餐，提供和支持。自己去选择需要的功能，提供更多的特性选择。比如如果想要支持，就应该选择这一项。支持使用书写源码。支持代码风格检查和格式化。 Vue Cli3 创建项目 Vue,Markdown 1. 安装 npm install -g @vue/cli 2. 创建一个项目 vue create iview-admin # OR vue ui showIm...

lifefriend_007 2019-08-23 12:20 评论0 收藏0
推送近期三波关于Vue.js的资讯

摘要：原文来自集前端最近很火的框架资源定时更新，欢迎一下。推送自己整理近期三波关于的资讯这里就抛砖引玉了，望有更屌的资源送助攻。原文来自：集web前端最近很火的vue2框架资源；定时更新，欢迎Star一下。推送自己整理近期三波关于Vue.js的资讯；这里就抛砖引玉了，望有更屌的资源送助攻。 showImg(https://segmentfault.com/img/bVVeiZ); 第...

Anonymous1 2019-08-22 11:10 评论0 收藏0
Vue 2019开发者图谱

摘要：为了便于您更清晰的理解的体系架构，在这里我将为您展示年开发者知识图谱，它包含了所有开发过程中的关键部分。在数据展示前端导入导出图表面板数据绑定等场景无需大量代码开发和测试，可极大节省企业研发成本并降低交付风险。作为 Vue 的初学者，您或许已经听过很多关于它的专业术语了，例如：单页面应用程序、异步组件、服务器端呈现等，您可能还听过和Vue经常一起被提到的工具和库，如Vuex、Webp...

cgspine 2019-08-23 18:14 评论0 收藏0