Vue07-第一個vue-cli項目

1、什麼是vue-cli

vue-cli 官方提供的一個腳手架，用于快速生成一個 vue 的項目模闆；

預先定義好的目錄結構及基礎代碼，就好比咱們在建立 Maven 項目時可以選擇建立一個骨架項目，這個骨架項目就是腳手架，我們的開發更加的快速；

主要的功能：

• 統一的目錄結構
• 本地調試
• 熱部署
• 單元測試
• 內建打包測試

2、需要的環境

• Node.js：http://nodejs.cn/download/

  安裝就無腦下一步就好，安裝在自己的環境目錄下

  确認nodejs安裝成功：

• cmd 下輸入

  node -v

  ，檢視是否能夠正确列印出版本号即可！

• npm -v

  這個npm，就是一個軟體包管理工具，就和maven差不多！

  安裝 Node.js 淘寶鏡像加速器（cnpm）

  這樣子的話，下載下傳會快很多~

  # -g 就是全局安裝
  npm install cnpm -g
  
  # 或使用如下語句解決npm速度慢的問題
  npm install --registry=https://registry.npm.taobao.org
             

  安裝過程可能有點慢~，耐心等待！雖然安裝了cnpm，但是盡量少用！

  全局安裝的位置：

  C:\Users\86152\AppData\Roaming\npm\node_modules

  

  安裝 vue -cli

cnpm install vue-cli-g
#檢視可以基于哪些模闆建立 vue 應用程式，通常我們選擇webpack
vue list
           

3、第一個vue-cli應用程式

建立

1、建立一個Vue項目，我們随便建立一個空的檔案夾在電腦上，我這裡在D盤下建立了一個目錄

E:\ideaProject\vue

2、建立一個基于 webpack 模闆的 vue 應用程式

#1、首先需要進入到對應的目錄 E:\ideaProject\vue
#2、這裡的myvue是項目名稱，可以根據自己的需求起名
vue init webpack myvue
           

一路都選擇no即可；

說明：

• Project name：項目名稱，預設回車即可
• Project description：項目描述，預設回車即可
• Author：項目作者，預設回車即可
• Install vue-router：是否安裝vue-router，選擇n不安裝（後期需要再手動添加）
• Use ESLint to lint your code：是否使用ESLint 做代碼檢查，選擇n不安裝（後期需要再手動添加）
• Set up unit tests：單元測試相關，選擇n不安裝（後期需要再手動添加）
• Should we run npm install for you after the,project has been created：建立完成後直接初始化，選擇n，我們手動執行；

初始化

cd myvue
npm install
           

執行完成後，目錄多了很多依賴

如果初始化報錯，看報錯提示，執行推薦方法修複

運作

npm run dev
           

運作結果：

浏覽器輸入位址測試：

http://localhost:8080

結束

## ctrl+c，然後選y