1. <thead id="8qdxw"></thead>

      返回舊版| 微信建站| 我要建站 | 建站學習 | 加入收藏
      vue教程當前位置:首頁 > cms教程 > 前端框架 > vue教程 > 正文

      win10下安裝部署vuejs的webpack腳手架工具

      發布時間:2019-03-11 22:40:48   來源:   點擊:
      1. 安裝nodejs

      nodejs官方下載地址:戳我
      選擇合適的版本下載,我這里選的是node-v8.11.3-x64.msi
      安裝路徑一般不裝在C盤,所以我這里選擇:D:\nodejs\
      一路next默認等待安裝完畢

      2. 設置nodejs的global和cache路徑

      設置路徑能夠把通過npm安裝的模塊集中在一起,便于管理。

      在nodejs的安裝目錄D:\nodejs\下,新建node_global和node_cache兩個文件夾
      執行指令:
      1. npm config set prefix "D:\nodejs\node_global" 
      2. npm config set cache "D:\nodejs\node_cache" 

      設置成功后,后續用命令npm install -g XXX安裝的XXX模塊就在D:\nodejs\node_global\node_modules里。

      查看配置信息指令:npm config list

      3. 設置環境變量

      添加用戶變量PATH:D:\nodejs\node_global
      新增系統變量NODE_PATH:D:\nodejs\node_global\node_modules

      4. 安裝cnpm(可選)
      由于許多npm包都在國外,直接使用npm指令下載安裝會比較慢,好像很多人推薦用淘寶的鏡像服務器,這樣所有用npm的指令都可以用cnpm代替。我個人喜歡直接用npm所以沒有安裝,實測其實npm也挺快的啊=。=不想安裝的小伙伴就跳過即可

      參考網址:戳我
      安裝指令:npm install -g cnpm --registry=https://registry.npm.taobao.org
      備注:-g表示下載安裝的包都放在之前配置好的安裝目錄下,否則就會在執行指令的當前目錄下

      5. 安裝vue-cli

      vue-cli是vuejs官方提供的一個命令行工具
      安裝指令:npm install -g vue-cli
      安裝完成后,vue就是一個指令了
      1. D:\nodejs\node_global 
      2. λ npm install -g vue-cli 
      3. npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen) 
      4. D:\nodejs\node_global\vue -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue 
      5. D:\nodejs\node_global\vue-init -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue-init 
      6. D:\nodejs\node_global\vue-list -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue-list 
      7. [email protected] 
      8. added 252 packages in 61.697s 

      6. 下載webpack腳手架

      (1) 下載指令:vue init webpack Vue01

      其中webpack是打包和壓縮的工具模板,learnVue是工程文件夾名稱
      執行完會在當前目錄下生成一個名為工程名稱的文件夾,并下載好了模板,但相關依賴還沒有安裝
      (2) 執行指令后會先提示下載中,大概幾秒后會提示輸入工程的相關信息:

      project name:工程名(不是文件夾名),不可以含有大寫字母,后續是頁面的title
      vue-router:vuejs提供的路由工具,我選擇安裝,相關介紹可戳這里
      ESLint:好像是一個語法檢查選項,我不安裝
      unit tests和e2e tests:好像都是測試項,我也沒有安裝
      最后一個選項是推薦相關依賴后續使用npm install指令安裝,選擇Yes, use npm
      (3) 然后等待一段時間即完成下載
      1. D:\develop 
      2. λ vue init webpack learnVue 
      3.  
      4. ? Project name learn-vue 
      5. ? Project description my first vue project 
      6. ? Author yvettre 
      7. ? Vue build standalone 
      8. ? Install vue-router? Yes 
      9. ? Use ESLint to lint your code? No 
      10. ? Set up unit tests No 
      11. ? Setup e2e tests with Nightwatch? No 
      12. ? Should we run `npm install` for you after the project has been created? (recommended) npm 
      (4) 下載完畢后可以打開工程文件看到如下圖所示的目錄結構,我們的代碼就放在src這個文件夾中,其他文件夾都是一些依賴和工具,不需要關心 


      7. 下載webpack相關依賴

      根目錄下有一個package.json的文件: 


      要安裝紅色箭頭所指的那些依賴項,安裝指令是:npm install

      1. D:\develop\Vue01 
      2. λ npm install 
      3. npm WARN [email protected] requires a peer of [email protected]^6.0.0 but none is installed. You must install peer dependencies yourself. 
      4. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents): 
      5. npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) 
      6.  
      7. up to date in 14.505s 
      8. 運行webpack的demo
      1. D:\develop\Vue01 
      2. $ npm run dev 
      3.  
      4.  DONE  Compiled successfully in 1637ms                                                                          21:14:46 
      5.  
      6.  I  Your application is running here: http://localhost:8080 
      這樣就運行起來啦,然后我們在瀏覽器中訪問localhost:8080,即可看到:


      版權所有:鄭州騰石網絡科技有限公司 備案信息:豫ICP備18019117號
      站長QQ:2863868475 業務合作咨詢:15137100750(同微信)
      本站所有投放的廣告是有其他網站提供,不代表本站立場,同時網站首頁廣告位對外出租詳情咨詢本站站長!同時歡迎廣大站長加入個人建站團隊
      • 建站客服
      • CMS仿站
      • CMS學習
      • 技術交流群:336572814
      福彩开奖 陕西快乐十分最新开奖结果 32张扑克牌牌九 广西十一选五 360时时彩倍投器 腾讯三分彩官网 黑龙江p62带连线走势图 体彩福建31选7走势图浙江风采 nba总决赛赛程 总进球数是什么意思 11选5杀号 500彩网正规网址 甘肃快三开奖结果今天一定牛 青海快3跨度走势图 新时时彩一星法 四川时时彩直播