vue知識掌握（一）

vue項目的搭建

本文章主要講述vue項目的搭建，在搭建vue項目前須要準備一些材料。

1.node安裝

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

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

選擇啓動方式

1. 初始化以後，再次將路徑改到你的thefive裏面

cd thefive

而後

npm run dev

運行以後會獲得一個本地地址：

http://localhost:8082

將地址複製到瀏覽器就能夠看到效果了。