TypeScript和vuejs 搭建webpack，初次體驗

shengguo 發(fā)布于2019-08-21 17:39 / 694人閱讀

摘要：決定改開發(fā)好，也好，二者結合實踐一下，網上一搜，剛好有。下面我把所有過程寫下，如有問題可以再文后留言，我詳解一下。

決定改TypeScript開發(fā)
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 初次見面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89820.html

【呆萌の體驗】vue.js初次體驗

摘要：官方默認項目是存放了一個為的打開文件夾有一個，還有一個名為組件的文件夾，里面放了一個文件。部分我們會發(fā)現(xiàn)這幾排字就是顯示在頁面的幾排文字部分這其中的這個文件引入了，還有上述的。結合查詢其他說法，就是說它會把是的元素以形式替換。前言我很早就想來學習學習vue.js啦，終于有了那么一些空閑的時間可以拿來學習，于是從前天開始我就每天抽一個多小時來體驗vue.js。當然啦，因為是小白入門，...

wdzgege 2019-08-21 17:21 評論0 收藏0
vue-cli3.0初體驗～

摘要：比如傳遞給時，使用。為所有的及其預處理文件開啟。在生產環(huán)境下為和使用在多核機器下會默認開啟。是否使用分割供應的包也可以是一個在包中引入的依賴的顯性的數(shù)組。查閱配置行為。之前因為parcel的出現(xiàn)，webpack也跟進了零配置vue-cli自然也不能落下,cli3.0也升級到webpack4，并增加許多新特性安裝并創(chuàng)建一個項目支持npm和yarn npm install -g @v...

AlphaWallet 2019-08-22 15:57 評論0 收藏0
Vue Cli3 創(chuàng)建項目

摘要：創(chuàng)建項目安裝創(chuàng)建一個項目默認套餐，提供和支持。自己去選擇需要的功能，提供更多的特性選擇。比如如果想要支持，就應該選擇這一項。支持使用書寫源碼。支持代碼風格檢查和格式化。 Vue Cli3 創(chuàng)建項目 Vue,Markdown 1. 安裝 npm install -g @vue/cli 2. 創(chuàng)建一個項目 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開發(fā)者圖譜

摘要：為了便于您更清晰的理解的體系架構，在這里我將為您展示年開發(fā)者知識圖譜，它包含了所有開發(fā)過程中的關鍵部分。在數(shù)據(jù)展示前端導入導出圖表面板數(shù)據(jù)綁定等場景無需大量代碼開發(fā)和測試，可極大節(jié)省企業(yè)研發(fā)成本并降低交付風險。作為 Vue 的初學者，您或許已經聽過很多關于它的專業(yè)術語了，例如：單頁面應用程序、異步組件、服務器端呈現(xiàn)等，您可能還聽過和Vue經常一起被提到的工具和庫，如Vuex、Webp...

cgspine 2019-08-23 18:14 評論0 收藏0