碼上歡樂
相關內容    簡體    繁體

windows環境下搭建vue開發環境

本文轉載自   查看原文   2018-11-22 17:36   1281    gulp/ git/ vue/ bower

 

1.1環境

運行環境nodejs

使用gulp自動化編譯scss，js等

使用bower管理依賴插件

使用requirejs作為模塊加載器

使用bootstrap css作為樣式框架

依賴jquery，jquery-ui兩個庫

1.2項目目錄

node_modules為依賴模塊文件

.bowerrc 為bower配置文件,包含模塊安裝目錄配置

bower.json為bower配置文件,包含依賴模塊等

gulpfile.js為gulp任務配置文件

package.json為程序配置文件,包含npm依賴模塊等

Lib為bower.json  dependencies中的依賴文件

 

 

進入正題：

node.js開發環境搭建

1、進入官網https://nodejs.org/en/download/

2、下載文件后，雙擊安裝

 

3、安裝相關環境 

打開C:\Program Files\nodejs目錄你會發現里面自帶了npm,直接用npm安裝相環境既可

安裝步驟之外的引申：

npm介紹

1、說明：npm（node package manager）nodejs的包管理器，用於node插件管理（包括安裝、卸載、管理依賴等）；

2、使用npm安裝插件：命令提示符執行npm install <name> [-g] [--save-dev]；

2.1、<name>：node插件名稱。例：npm install gulp --save-dev

2.2、-g：全局安裝。將會安裝在C:\Users\Administrator\AppData\Roaming\npm，並且寫入系統環境變量；  非全局安裝：將會安裝在當前定位目錄；  全局安裝可以通過命令行在任何地方調用它

2.3、--save：將保存配置信息至package.json（package.json是nodejs項目配置文件）；

2.4、-dev：保存至package.json的devDependencies節點，不指定-dev將保存至dependencies節點；一般保存在dependencies的像這些express/ejs/body-parser等等。

2.5、為什么要保存至package.json？因為node插件包相對來說非常龐大，所以不加入版本管理，將配置信息寫入package.json並將其加入版本管理，其他開發者對應下載即可（命令提示符執行npm install，則會根據package.json下載所有需要的包，npm install --production只下載dependencies節點的包）。

選裝cnpm

1、說明：因為npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，如果npm的服務器在中國就好了，所以我們樂於分享的淘寶團隊干了這事。！來自官網：“這是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鍾 一次以保證盡量與官方服務同步。”；

2、官方網址：http://npm.taobao.org；

3、安裝：命令提示符執行npm install cnpm -g --registry=https://registry.npm.taobao.org；  注意：安裝完后最好查看其版本號cnpm -v或關閉命令提示符重新打開，安裝完直接使用有可能會出現錯誤；

注：cnpm跟npm用法完全一致，只是在執行命令時將npm改為cnpm（以下操作將以cnpm代替npm）。

npm install -g cnpm --registry=http://registry.npm.taobao.org

Bower使用（為什么使用bower，因為它可以節省掉你去git或是網上找js的時間;）

bower的安裝

 

1，首先在我的系統 安裝 nodejs。因為我的系統是windows，還需要安裝msysgit,注意圖二中的選項

2，之后就可以用npm包管理工具下載並全局安裝bower:  

>npm install -g bower

全局安裝bower 后，可以查看Bower的幫助信息，使用命令：

>bower help

3， 初始化當前工程的bower，此操作會在當前目錄下生成bower.json文件：

>bower init

bower的使用

 

使用了bower的項目都會在目錄下有一個bower.json文件。在該文件同級目錄下，使用如下命令即可安裝相關依賴庫。

>bower install  

注：bower下載安裝依賴庫實際上是使用git進行下載。對於linux系統，由於默認都有安裝git，所以一般沒問題。但是windows系統一般沒有git。在windows系統下需要確定安裝了git客戶端，建議使用同捆的git bash命令行來執行bower install命令。或者把git目錄加入windows的環境變量中，再在命令行中執行bower install命令。()

使用bower安裝某個特定類庫，例如jquery:

> bower install jquery

使用bower更新某個特定類庫，例如jquery:

>bower update jquery

刪除包,例如jquery (如果包已經被依賴，則不能刪除)

>bower uninstall jquery

試着在項目文件夾下，下載jquery 和 underscore

bower install jquery underscore

然后就可以看到項目文件夾下多了bower_components（默認目錄）,再就是兩個插件包了

 

初步這樣也就行了，但是/bower_components這個目錄有點讓人不習慣，我想把東西下載到我習慣的目錄里。需要加一個.bowerrc文件。注意，不需要名字什么的，只要新增一個.bowerrc就行了。

提示：用cmd命令創建文件如下

里面可以定義下載目錄：

{

"directory": "app/vendor"

}

同樣的cmd命令再執行一遍，這次可以看到文件下載到app/vendor中了。

由於在實際安裝過程中，沒有運行命令 >bower init 現在重新運行該命令 生成bower.json

遇到了問題

解決辦法：在 windows cmd（管理者） 里面使用 bower init,而不是在 git bash 里面使用 bower init.

使用bower install jquery --save才會把jquery依賴記入到bower.json。

要安裝某個版本使用#，如安裝juqery1.9.1，可以使用bower install jquery#1.9.1。

除了用包名安裝，也可以指定git地址，進行安裝，如bower install https://github.com/jquery/jquery。

bower install --save handlebars 后就會看到handlebar 在bower.json的dependencies里，如果不加--save就不會有。

接下來刪了app/vendor下的所有內容，然后bower install，他會把bower.json中的dependencies重新下載。

全局安裝gulp

Gulp.js是一個自動化構建工具，開發者可以使用它在項目開發過程中自動執行常見任務，gulp.js是基於node.js構建的，利用node.js流的威力，可以快速構建項目

1、說明：全局安裝gulp目的是為了通過她執行gulp任務；

2、安裝：命令提示符執行cnpm install gulp -g；

3、查看是否正確安裝：命令提示符執行gulp -v，出現版本號即為正確安裝。

2、新建package.json文件

2.1、說明：package.json是基於nodejs項目必不可少的配置文件，它是存放在項目根目錄的普通json文件；

2.2、它是這樣一個json文件（注意：json文件內是不能寫注釋的，復制下列內容請刪除注釋）：

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

{

  "name": "test",   //項目名稱（必須）

  "version": "1.0.0",   //項目版本（必須）

  "description": "This is for study gulp project !",   //項目描述（必須）

  "homepage": "",   //項目主頁

  "repository": {    //項目資源庫

    "type": "git",

    "url": "https://git.oschina.net/xxxx"

  },

  "author": {    //項目作者信息

    "name": "surging",

    "email": "surging2@qq.com"

  },

  "license": "ISC",    //項目許可協議

  "devDependencies": {    //項目依賴的插件

    "gulp": "^3.8.11",

    "gulp-less": "^3.0.0"

  }

}

2.3、當然我們可以手動新建這個配置文件，但是作為一名有志青年，我們應該使用更為效率的方法：命令提示符執行cnpm init

2.4、查看package.json幫助文檔，命令提示符執行cnpm help package.json

特別注意：package.json是一個普通json文件，所以不能添加任何注釋。參看 http://www.zhihu.com/question/23004511

3、本地安裝gulp插件

3.1、安裝：定位目錄命令后提示符執行cnpm install --save-dev；

3.2、本示例以gulp-less為例（編譯less文件），命令提示符執行cnpm install gulp-less --save-dev；

3.3、將會安裝在node_modules的gulp-less目錄下，該目錄下有一個gulp-less的使用幫助文檔README.md；

3.4、為了能正常使用，我們還得本地安裝gulp：cnpm install gulp --save-dev；

PS：細心的你可能會發現，我們全局安裝了gulp，項目也安裝了gulp，全局安裝gulp是為了執行gulp任務，本地安裝gulp則是為了調用gulp插件的功能。

4、新建gulpfile.js文件（重要）

4.1、說明：gulpfile.js是gulp項目的配置文件，是位於項目根目錄的普通js文件（其實將gulpfile.js放入其他文件夾下亦可）。

4.2、它大概是這樣一個js文件（更多插件配置請查看這里）：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

//導入工具包 require('node_modules里對應模塊')

var gulp = require('gulp'), //本地安裝gulp所用到的地方

    less = require('gulp-less');

 

//定義一個testLess任務（自定義任務名稱）

gulp.task('testLess', function () {

    gulp.src('src/less/index.less') //該任務針對的文件

        .pipe(less()) //該任務調用的模塊

        .pipe(gulp.dest('src/css')); //將會在src/css下生成index.css

});

 

gulp.task('default',['testLess', 'elseTask']); //定義默認任務 elseTask為其他任務，該示例沒有定義elseTask任務

 

//gulp.task(name[, deps], fn) 定義任務  name：任務名稱 deps：依賴任務名稱 fn：回調函數

//gulp.src(globs[, options]) 執行任務處理的文件  globs：處理的文件路徑(字符串或者字符串數組)

//gulp.dest(path[, options]) 處理完后文件生成路徑

bower incnstall  表示安裝bower.json中的依賴文件到lib

npm install 表示安裝package.json中的外掛到node_modules

gulp環境下安裝SASS

1.首先全局環境下配置淘寶鏡像（這里是全局環境，不是項目根目錄）

執行語句：npm install -g cnpm --registry=https://registry.npm.taobao.org

2.執行項目根目錄，安裝

執行語句：cnpm install --save-dev node-sass

3.仍然是項目根目錄，安裝

執行語句：npm install --save-dev gulp-sass

gulp運行

輸入gulp

Require.js使用

1、為什么要用require.js

最早的時候，所有Javascript代碼都寫在一個文件里面，只要加載這一個文件就夠了。后來，代碼越來越多，一個文件不夠了，必須分成多個文件，依次加載。

  <script src="1.js"></script>

　　<script src="2.js"></script>

　　<script src="3.js"></script>

　　<script src="4.js"></script>

　　<script src="5.js"></script>

　　<script src="6.js"></script>

這段代碼依次加載多個js文件。

這樣的寫法有很大的缺點。首先，加載的時候，瀏覽器會停止網頁渲染，加載文件越多，網頁失去響應的時間就會越長；其次，由於js文件之間存在依賴關 系，因此必須嚴格保證加載順序（比如上例的1.js要在2.js的前面），依賴性最大的模塊一定要放到最后加載，當依賴關系很復雜的時候，代碼的編寫和維 護都會變得困難。

require.js的誕生，就是為了解決這兩個問題：

        （1）實現js文件的異步加載，避免網頁失去響應；

        （2）管理模塊之間的依賴性，便於代碼的編寫和維護。

2、require.js的加載

<script src="js/require.js"></script>

加載require.js以后，下一步就要加載自己的代碼了。假定自己的代碼文件是main.js，也放在js目錄下面。那么，只需要寫成下面這樣就行了：

<script src="js/require.js" data-main="js/main"></script>

3、模塊的加載

1）main.js

require.config({

    //baseUrl: "../lib",

    shim: {

        'underscore': {

            exports: '_'

        },

    },

    paths: {

        "jquery": "../lib/jquery/dist/jquery.min",

        "underscore": "../lib/underscore/underscore-min",

        "selector":"selector"

    }

});

require(['jquery', 'underscore','selector'], function ($, _,selector){

    alert(selector.add(1,1));

});

2）模塊的寫法 selector.js

define(function() {

    var add = function(x,y) {

        return x+y;

    }

 

    return {

        add:add

    };

});

 

個人實踐搭環境整理資料參考

參照：https://jingyan.baidu.com/article/14bd256e7f7d7fbb6d2612c4.html

  1. 先裝nodejs
  2. 安裝cnpm 地址參照http://www.ydcss.com/archives/18  一點 gulp詳細入門教程

    npm install cnpm -g --registry=https://registry.npm.taobao.org；

  3. 微軟操作系統選擇msysgit,裝bower,bower install 

    cnpm install msysgit –save-dev

  4. 裝完bower后，用cmd命令創建文件

    .bowercc創建完后手動輸入{“directory”:”lib”}

  5. cmd里先bower init然后bower install jquery-ui bootstrap requirejs vue
  6. 全局安裝gulp $cnpm install gulp –g –save-dev
  7. 把gulpfilejs文件放入項目文件，對照里面內容安裝gulp插件
  8. 新建package.json, cnpm init

  9. cmd命令 (gulp啟動)或webstorm啟動gulp

  10. 報錯解決金句

     

  11. gulp啟動成功狀態

 

 

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 windows環境下搭建vue+webpack的開發環境 windows環境搭建Vue開發環境 Windows環境搭建Vue開發環境 windows環境搭建Vue開發環境 【原創】windows下搭建vue開發環境+IIS部署 windows下搭建vue開發環境+IIS部署 windows下搭建vue+webpack的開發環境 windows下搭建vue開發環境+IIS部署 windows下vue前端開發環境搭建及nginx部署 windows下搭建vue開發環境+IIS部署 [轉]
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM