欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

Dart Web開發(fā)環(huán)境搭建及新建運(yùn)行項(xiàng)目 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價(jià)值，我們在追求其視覺表現(xiàn)的同時(shí)，更側(cè)重于功能的便捷，營銷的便利，運(yùn)營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏壧峁┍憬莸闹С郑?

您當(dāng)前位置>首頁 » 新聞資訊 » 網(wǎng)站建設(shè) >

Dart Web開發(fā)環(huán)境搭建及新建運(yùn)行項(xiàng)目

發(fā)表時(shí)間：2019-3-14

發(fā)布人：葵宇科技

瀏覽次數(shù)：87

Dart Web開發(fā)環(huán)境搭建及新建運(yùn)行項(xiàng)目

    • 開發(fā)環(huán)境的搭建
      • 1. 下載Dart SDK
      • 2. 下載開發(fā)工具
      • 3. 創(chuàng)建Dart Web項(xiàng)目

Dart除了可以使用Flutter進(jìn)行移動(dòng)應(yīng)用開發(fā)外，還可以進(jìn)行Web開發(fā)，Dart主要是替換了JavaScript，用Dart來做JavaScript這部分工作，也可以說Dart替代了JavaScript和JQuery框架。我們用Dart來寫Web后，編譯器會(huì)自動(dòng)將Dart文件編譯為JavaScript文件進(jìn)行運(yùn)行，只不過我們寫的語法規(guī)范是Dart語法。Dart文件轉(zhuǎn)JavaScript文件可以使用dart2js來轉(zhuǎn)換。接下來，我們就開始Dart Web開發(fā)的準(zhǔn)備工作吧。本文將主要介紹：

  • Dart Web開發(fā)環(huán)境配置
  • Dart Web開發(fā)工具安裝
  • Dart Web開發(fā)的兩種創(chuàng)建Web項(xiàng)目的方式
  • 運(yùn)行Dart Web項(xiàng)目

開發(fā)環(huán)境的搭建

Dart Web官方配置英文文檔地址：https://webdev.dartlang.org/guides/get-started
我們也可以使用DartPad體驗(yàn)和運(yùn)行Dart程序：https://dartpad.dartlang.org/
Fast to Study Flutter And Dart. QQ群：979966470
DartPad界面

1. 下載Dart SDK

本文是在Windows環(huán)境下進(jìn)行安裝配置的。
Windows下需要先安裝chocolatey：https://chocolatey.org/
使用CMD命令安裝：

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

新建一個(gè)chocolatey.bat文件，將上面的這段命令復(fù)制進(jìn)去保存。雙擊運(yùn)行這個(gè)bat文件就會(huì)自動(dòng)執(zhí)行安裝chocolatey包管理器操作了。
安裝好之后，Windows命令窗口執(zhí)行如下命令：

C:\> choco install dart-sdk

Dart-SDK安裝
Linux需要執(zhí)行以下命令：

> sudo apt-get update
> sudo apt-get install apt-transport-https
> sudo sh -c 'curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -'
> sudo sh -c 'curl https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list > /etc/apt/sources.list.d/dart_stable.list'

> sudo apt-get update
> sudo apt-get install dart

Mac下需要執(zhí)行以下命令：

 > brew tap dart-lang/dart
 > brew install dart

當(dāng)然除了用命令安裝Dart SDK外，我們也可以安裝Windows版本安裝包文件，下載地址：http://www.gekorm.com/dart-windows/
Dart Web SDK安裝包
在Dart Web SDK里包含以下工具：
Dart Web SDK里包含的工具
其實(shí)主要的命令工具就是：webdev，用來構(gòu)建和部署Dart Web程序；dart2js，將dart文件轉(zhuǎn)為js文件的編譯工具；dartdevc，一個(gè)模塊化的dart轉(zhuǎn)js文件的編譯工具。
Dart Web SDK里包含的工具
chocolatey執(zhí)行命令安裝完dart-sdk后，將Dart SDK的bin目錄加入環(huán)境變量：
配置Dart環(huán)境變量
測試我們的Dart SDK環(huán)境變量是否配置好，輸入如下命令：

dart --version

如能夠正確輸出版本號，則dart環(huán)境變量配置成功。
測試Dart環(huán)境變量是否配置成功

2. 下載開發(fā)工具

開發(fā)工具官方推薦是WebStorm，當(dāng)然也可以使用Visual Studio Code，也可以使用命令工具創(chuàng)建、運(yùn)行項(xiàng)目。如果想支持命令行運(yùn)行項(xiàng)目，這樣快速方便些?？梢园惭bwebdev和stagehand（這里需要安裝執(zhí)行下面這兩個(gè)命令）：

> pub global activate webdev
> pub global activate stagehand

安裝命令窗口：
安裝webdev和stagehand
注意：如果你想運(yùn)行使用Dart2以下的版本，WebStorm版本至少要2018.1.3及以上。當(dāng)然，現(xiàn)在基本都用Dart2及新版本開發(fā)了。

接下來下載安裝WebStorm：

WebStorm官方下載地址：https://www.jetbrains.com/webstorm/
WebStorm安裝界面

3. 創(chuàng)建Dart Web項(xiàng)目

使用命令行創(chuàng)建：

> mkdir quickstart
> cd quickstart
> stagehand web-simple
> pub get

使用WebStorm創(chuàng)建：

新建項(xiàng)目：
WebStorm新建項(xiàng)目
選擇Dart項(xiàng)目，點(diǎn)擊CREATE：
WebStorm新建項(xiàng)目
項(xiàng)目結(jié)構(gòu)目錄如下圖：
項(xiàng)目結(jié)構(gòu)目錄
運(yùn)行項(xiàng)目：
運(yùn)行項(xiàng)目
運(yùn)行后，可以看到控制臺顯示的日志，如果看到類似的Dart Server啟動(dòng)成功就可以訪問我們的頁面了：
運(yùn)行項(xiàng)目
頁面效果截圖：
運(yùn)行效果
可以看出，這里我們的dart文件就是充當(dāng)操作html的Dom樹的功能，也就是替代了JS的原始用法，不過最終運(yùn)行時(shí)也是將dart文件編譯為js文件運(yùn)行，只不過dart語法比js的使用更加方便與強(qiáng)大。

import 'dart:html';

void main() {
  querySelector('#output').text = 'Your Dart app is running.';
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="scaffolded-by" content="https://github.com/google/stagehand">
    <title>untitled</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
    <script defer src="main.dart.js"></script>
</head>

<body>

  <div id="output"></div>

</body>
</html>

再重復(fù)下，我們也可以用Visual Studio Code進(jìn)行開發(fā)，也可以使用命令創(chuàng)建和運(yùn)行項(xiàng)目：

使用命令行創(chuàng)建：

> mkdir quickstart
> cd quickstart
> stagehand web-simple
> pub get

命令行運(yùn)行項(xiàng)目：

webdev serve

如果想將dart文件編譯轉(zhuǎn)為js文件，使用dart sdk自帶的dart2js這個(gè)工具。基本用法：

dart2js -O2 -o test.js test.dart

test.js為輸出的js文件的路徑+文件名；test.dart為輸入的要轉(zhuǎn)換的dart文件的路徑+文件名。
更多參數(shù)和復(fù)雜用法命令，請看官方：https://webdev.dartlang.org/tools/dart2js

關(guān)于Dart Web開發(fā)環(huán)境搭建及新建運(yùn)行項(xiàng)目就講解這么多。

相關(guān)案例查看更多