初始化項目

這里我們使用vue-cli來自動生成vue.js項目的模板。

1. 安裝Node.js

2. 用npm安裝vue-cli

npm install -g vue-cli

可能會提示權限的問題，需要授權

sudo chmod -R 777 /usr/local/lib

3. 使用vue-cli

vue init webpack

vue為我們提供了兩個模板，webpack和webpack-simple，webpack-simple比較適合小項目，這里我們用webpack。

4. 安裝依賴并運行

npm install
npm run dev

項目結構

我們下面來看一下項目目錄下這一堆東西分別是什么。

.
├── build/                      # webpack config files
│   └── ...
├── config/
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── .babelrc                    # babel config
├── .postcssrc.js               # postcss config
├── .eslintrc.js                # eslint config
├── .editorconfig               # editor config
├── index.html                  # index.html template
└── package.json                # build scripts and dependencies

build/

這個目錄包含開發環境和生產環境Webpack的實際配置。通常不需要修改這些文件。

config/index.js

這是主配置文件，是build的通用配置選項。包括開發環境

src/

這是你主要代碼的所在位置，也包括assets。

static/

這里是不需要用Webpack處理的靜態資源。

index.html

這是我們單頁面應用程序的模板。在開發和構建期間，Webpack將生成資產，并將生成資產的url自動注入到此模板中呈現出最終的html。

package.json

包含所有構建依賴項和構建命令的npm軟件包元文件。