Vue 開發環境搭建 (Mac)


一、初識

由於個人工作原因以及技術需要一個提升,略晚的開始初探Vue ~。~

二、那么Vue是什么呢?

他就是一個前端的框架,特點是數據雙向綁定、組件化。

 

三、推薦開發環境

 

四、環境安裝

 

  打開終端運行以下命令

  1.安裝brew

   /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

  2.安裝 nodejs

   brew install nodejs

 

  3.獲取nodejs模塊安裝目錄訪問權限

   sudo chmod -R 777 /usr/local/lib/node_modules/

 

  4.安裝淘寶鏡像(cnmp)

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

 

   5.安裝webpack

   cnpm install webpack -g

 

  6.安裝vue腳手架

   npm install vue-cli -g

 

 

  7.在硬盤上找一個文件夾放工程用的,在終端中進入該目錄

   cd 目錄路徑

 

 

  8.根據模板創建項目

 

    vue init webpack-simple 工程名字<工程名字不能用中文>

 

    或者創建 vue1.0 的項目

 

    vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

 

    會有一些初始化的設置,如下輸入:

 

    Target directory exists. Continue? (Y/n) 直接回車默認(然后會下載 vue2.0模板,這里可能需要連代理)

 

    Project name (vue-test) 直接回車默認

 

    Project description (A Vue.js project) 直接回車默認

 

    Author 寫你自己的名字

 

 

  9.cd 命令進入創建的工程目錄

   cd 工程名稱

 

 

  注意:最后三步都是要進入到當前工程目錄后執行的。

 

  10.安裝項目依賴

   npm install

 

 

  11.安裝 vue 路由模塊vue-router和網絡請求模塊vue-resource

   cnpm install vue-router vue-resource --save

 

 

  12.啟動項目

   npm run dev  

 

 

 

Vue官網:https://cn.vuejs.org/v2/guide/instance.html

內容部分出處:http://www.open-open.com/lib/view/open1476240930270.html#articleHeader9

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM