vue從開發環境搭建到建立到第一個項目-新手必看

(一) 關于mac

  • 開發環境:
    Homebrew ( Mac的包管理神器 ) → Node.js → cnpm(淘寶鏡像,節省安裝時間) → webpack → vue-cli(vue腳手架) → IDE( Vue開發我用的是VSCode )

  1. 打開terminal 安裝homebrew
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  2. 安裝node.js
  • 直接在node.js官網下載安裝,全程傻瓜式安裝。node.js是自帶npm的,npm在后面安裝別的環境需要用到。
  • 安裝完后,我們可以通過在terminal中輸入 node -v ,npm -v 分別檢查node.js 和npm 的版本--
  • mac 這里需要注意?。∫onpm安裝目錄訪問權限,否則npm安裝別的東西都會失?。ㄖ辽傥沂沁@樣子...)
    sudo chmod -R 777 /usr/local/lib/node_modules/
  1. 安裝cnpm
    在terminal里輸入
    npm install -g cnpm --registry=https://registry.npm.taobao.org

  2. 安裝webpack
    cnpm install webpack -g
    在terminal中輸入webpack -v檢查是否安裝成功以及查看版本號

  3. 安裝vue-cli
    npm install vue-cli -g
    在terminal中輸入vue -V(注意這里是大寫V)檢查是否安裝成功以及查看版本號

  4. 安裝VSCode

(二) 關于windows

https://www.cnblogs.com/zhaomeizi/p/8483597.html

很詳細的步驟,一步一步的按照操作來,記得用管理員的terminal去運行npm的指令,管理員的terminal這樣去打開。這樣在加載淘寶鏡像的時候可以不報錯。


勾選對號

(三) 安裝之后會依次填寫一些關于項目的信息:

This will install Vue 2.x version of the template. 
For Vue 1.x use: vue init webpack#1.0 projectname
? Project name (projectname) 
? Project name projectname
? Project description (A Vue.js project) 
? Project description A Vue.js project
? Author Joe --------------------- 項目創建者
? Author Joe
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否啟用ESLint
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "projectname".
To get started: --------------------- 這里說明后續的三個步驟
cd projectname
npm install
npm run dev
  1. 項目名稱、關于項目的描述、作者名稱
  • 找一個放工程的文件夾,terminal cd 到該目錄,mac下可以直接把文件夾拖到terminal ,會自動填入路徑
  • 使用vue-cli創建項目,需要注意項目的名字不能用中文
    vue init webpack-simple projectname
  • 到選擇Vue build方式時,有兩種方式,第一種為standalone方式,第二種runtime-only為runtime方式。
    runtime 打包的是 /node_modules/vue/dist/vue.common.js
    standalone 打包的是 /node_modules/vue/dist/vue.js
    Vue2.0有兩種Build的方式:the standalone build and the runtime-only build(獨立構建和運行時構建),可以知道:獨立構建包括編譯和支持template選項。但也要依賴于瀏覽器的API,所以不能用于服務端渲染。運行時構建不包括模板編譯,并且不支持template選項,只能使用render選項。
  1. 是否安裝vue-router(是否安裝路由)
  2. 是否使用ESLint規范,ESLint 是用來檢查我們寫的 JavaScript 代碼是否滿足指定規則的靜態代碼檢查工具。通過用 ESLint 來檢查一些規則,我們可以統一代碼風格規則,如:代碼縮進用幾個空格;是否用駝峰命名法來命名變量和函數名等。減少錯誤, 如:相等比較必須用 === ,變量在使用前必須被聲明,在條件語句中不能使用賦值語句等。提高代碼質量,如:函數最多有多少條件分支;最多有幾個參數,代碼塊最多能嵌套多少層等。其他。如: 禁用 alert。這可以提高用戶體驗,因為 alert 框的外觀不是那么好看,而且往往與網站的風格不搭,一般都會自定義 alert 框。
  3. 是否建立單元測試代碼,可以不建立
  • 項目建立之后在對應的目錄下就會出現你剛剛建立的文件夾,進入你建立的文件夾,執行$ cnpm i 命令,會自動安裝一些vue項目需要的壓縮包之類的文件。

(四) 創立完成之后會在項目文件夾下自動生成如下目錄,用自己選擇的IDE,例如Vscode直接打開該文件夾即可。

項目目錄

(五) 詳細的文件夾及文件介紹:

項目目錄介紹

(六) 安裝完成之后運行npm run dev命令運行項目,就可以在瀏覽器中瀏覽建立的最簡單的vue項目了。

  • 如果沒有自動跳出來,記得在瀏覽器里輸入localhost:8080


    vue頁面

(七) 注意:這里是默認服務啟動的是本地的8080端口,所以請確保你的8080端口不被別的程序所占用。

  • 當然這個端口也是可以修改的,在根目錄的config文件夾下有個index.js文件,除了修改端口,還可以根據需要改變其他配置信息。


    端口
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。