成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

TypeScript和vuejs 搭建webpack，初次體驗(yàn)

shengguo / 704人閱讀

摘要：決定改開(kāi)發(fā)好，也好，二者結(jié)合實(shí)踐一下，網(wǎng)上一搜，剛好有。下面我把所有過(guò)程寫下，如有問(wèn)題可以再文后留言，我詳解一下。

決定改TypeScript開(kāi)發(fā)
TypeScript好，vuejs也好，二者結(jié)合實(shí)踐一下，網(wǎng)上一搜：https://github.com/Microsoft/...，剛好有。以后就用TypeScript搞了。下面我把所有過(guò)程寫下，如有問(wèn)題可以再文后留言，我詳解一下?；蛘呒游胰禾接懀狐c(diǎn)此處直接加群，或者：478694438

第一步：初始化項(xiàng)目
cnpm init

第二步：安裝依賴

npm install https://github.com/DanielRosenwasser/vue#540a38fb21adb7a7bc394c65e23e6cffb36cd867
npm install --save-dev typescript webpack ts-loader css-loader vue-loader [email protected]

第三步：tsconfig.json
根目錄下新建tsconfig.json，內(nèi)容：

{
    "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 然后瀏覽器打開(kāi)index.html 即可看到效果。最終結(jié)果如下圖：

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89820.html

相關(guān)文章

  • 【呆萌の體驗(yàn)】vue.js初次體驗(yàn)

    摘要：官方默認(rèn)項(xiàng)目是存放了一個(gè)為的打開(kāi)文件夾有一個(gè)，還有一個(gè)名為組件的文件夾，里面放了一個(gè)文件。部分我們會(huì)發(fā)現(xiàn)這幾排字就是顯示在頁(yè)面的幾排文字部分這其中的這個(gè)文件引入了，還有上述的。結(jié)合查詢其他說(shuō)法，就是說(shuō)它會(huì)把是的元素以形式替換。 前言 我很早就想來(lái)學(xué)習(xí)學(xué)習(xí)vue.js啦，終于有了那么一些空閑的時(shí)間可以拿來(lái)學(xué)習(xí)，于是從前天開(kāi)始我就每天抽一個(gè)多小時(shí)來(lái)體驗(yàn)vue.js。當(dāng)然啦，因?yàn)槭切“兹腴T，...

    wdzgege 評(píng)論0 收藏0

  • vue-cli3.0初體驗(yàn)～

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

    AlphaWallet 評(píng)論0 收藏0

  • Vue Cli3 創(chuàng)建項(xiàng)目

    摘要：創(chuàng)建項(xiàng)目安裝創(chuàng)建一個(gè)項(xiàng)目默認(rèn)套餐，提供和支持。自己去選擇需要的功能，提供更多的特性選擇。比如如果想要支持，就應(yīng)該選擇這一項(xiàng)。支持使用書(shū)寫源碼。支持代碼風(fēng)格檢查和格式化。 Vue Cli3 創(chuàng)建項(xiàng)目 Vue,Markdown 1. 安裝 npm install -g @vue/cli 2. 創(chuàng)建一個(gè)項(xiàng)目 vue create iview-admin # OR vue ui showIm...

    lifefriend_007 評(píng)論0 收藏0

  • 推送近期三波關(guān)于Vue.js的資訊

    摘要：原文來(lái)自集前端最近很火的框架資源定時(shí)更新，歡迎一下。推送自己整理近期三波關(guān)于的資訊這里就拋磚引玉了，望有更屌的資源送助攻。 原文來(lái)自：集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎Star一下。 推送自己整理近期三波關(guān)于Vue.js的資訊； 這里就拋磚引玉了，望有更屌的資源送助攻。 showImg(https://segmentfault.com/img/bVVeiZ); 第...

    Anonymous1 評(píng)論0 收藏0

  • Vue 2019開(kāi)發(fā)者圖譜

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

    cgspine 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<