# vue項目的搭建 本文章主要講述vue項目的搭建，在搭建vue項目前需要準備一些材料。 1.[node](https://nodejs.org/zh-cn/)安裝 npm：在你安裝node的時候一般node已經自帶了npm，所以忽略。 webpack：npm install webpack -g ...
# vue項目的搭建
本文章主要講述vue項目的搭建，在搭建vue項目前需要準備一些材料。
1.[node](https://nodejs.org/zh-cn/)安裝
npm：在你安裝node的時候一般node已經自帶了npm，所以忽略。
webpack：npm install webpack -g
檢驗安裝是否成功的辦法：
檢驗node：`node -v`
檢驗npm：`npm -v`
檢驗webpack：`webpack -v`
2.安裝vue-cli(vue腳手架)
`npm install --global vue-cli`
接下來就是正式的開始搭建項目了。
3.打開Windows的命令行視窗
快捷方式：win+R然後輸入cmd確認。
將路徑切換到自己希望保存項目的路徑。
然後輸入：vue init <template-name> <project-name>
init是初始化項目，template-name是模版名，project-name是項目名（自定義）。
例如（vue init webpack thefive）
目前vue官方提供了六種初始化模版，分別是webpack、webpack-simple、browserify、browserify-simple、pwa、simple。其中最常用的是webpack模版。
這時候命令行會出現一系列提問需要你去確認。
? Project name (thefive)
確認項目名
? Project description (A Vue.js project)
確認項目描述
? Author (.................)
確認作者信息
? Vue build (Use arrow keys)
> Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
選擇打包方式
? Install vue-router? (Y/n)
是否安裝vue-router
? Use ESLint to lint your code? No
是否使用ESLint語法
? Set up unit tests (Y/n)
是否添加單元測試
? Setup e2e tests with Nightwatch? (Y/n)
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
Yes, use Yarn
No, I will handle that myself
選擇啟動方式
4. 初始化之後，再次將路徑改到你的thefive裡面
cd thefive
然後
`npm run dev`
運行之後會得到一個本地地址：
http://localhost:8082
將地址複製到瀏覽器就可以看到效果了。
