# vue cli 安裝 2

###### tags: `vue`
`
Vue-cli 是由 Vue 官方提供的開發工具，可以快速透過指令建立出一個立即可用的開發環境。
在我們用npm 安裝 vue-cli之前，需要先安裝node.js，安裝完後我們開啟cmd，

### Step 1: 安裝vue-cli
輸入

`npm install -g @vue/cli`

若要安裝指定版本則輸入

`npm install -g @vue/[e-mail].x`

安裝完可以下

`vue -V`

查看自己vue-cli版本
之後就可以新增專案了

### Step 2:新增專案

cd到你想要新增專案的地方的輸入
`vue create 專案名稱`
安裝途中出現這個
是在問你要安裝那些套件
我們選下方的 manually select features
會出現套件列表
我們選擇 babel、router、vuex、linter/formatter
這4個
之後一路按enter，就能創建新專案了。

安裝完專案後，要來解釋該專案的結構

## 專案結構
下圖是專案的資料夾結構
node_modules:該專案的套件都在這地方
public:放置靜態資源的地方，引用時需用絕對路徑
src:開發目錄，基本上只會在這地方打code
src/assets: 放置靜態資源的地方，如css、圖片…，引用時需用相對路徑
src/components:放元件的地方
src/route:設定路由的地方
src/store:設定vuex狀態管理
src/views:路由元件，指某個路由指向該元件
App.vue:入口元件，所有元件的路由都會在此切換
main.js:入口文件，引用套件時皆須在此做設定
package.json:專案環境配置