作者：小土豆biubiubiu
掘金：https://juejin.im/user/58c61b4361ff4b005d9e894d
簡書：https://www.jianshu.com/u/cb1c3884e6d5
微信公眾號：土豆媽的碎碎念（掃碼關注，一起吸貓，一起聽故事，一起學習前端技術）
碼字不易，點贊鼓勵喲~
一.前言
本篇文章主要是使用vue-cli搭建一個簡單的vue項目，這個項目在其他文章中作為代碼演示的環境會一直使用。
注意：默認大家的電腦已經安裝nodejs，所以這里不總結nodejs的安裝。
二.新建項目目錄
這里呢，我們需要先創建一個目錄存放我們的項目。我自己在E:\\MyStudy下創建了一個test目錄。
接下了就可以開始了。
三.安裝vue-cli腳手架
安裝vue-cli腳手架使用的命令為：npm install --save-dev vue-cli（局部安裝vue-cli）
安裝完成后的目錄
四.使用webpack初始化目錄
接着我們使用webpack初始化項目目錄，用到的命令為：vue init webpack VueDemo。
初始化完成后的項目目錄
注意：在執行這個命令之前呢，還需要有一個操作。因為前面我們安裝vue-cli時是局部安裝，所以直接在命令行執行vue命令是執行不了了，因此我們需要將vue-cli的安裝路徑添加到環境變量中。
局部安裝完成后vue-cli的安裝路徑和安裝程序如下
然后我們需要將vue命令所在的目錄E:\MyStudy\test\node_modules\.bin添加到環境變量中（添加方法可自行百度）。
添加完成后就可以成功使用vue-cli提供的命令了。
假如添加完成后還無法執行vue命令，則需要重新啟動一下cmd命令行即可。
五.啟動項目
啟動項目我們需要進入到【E:\MyStudy\test\VueDemo】，執行npm run dev
六.瀏覽器訪問
到此，一個簡單的vue項目就搭建完成了。
還有一點需要注意，看這里！！！
我們初始化項目的時候並沒有安裝vue-router，項目會有以下幾個特點
1.項目的src目錄下不會自動生成一個叫router目錄。
2.HelloWorld組件的展示是通過在App組件中引入而展示的。
而假如初始化的時候安裝了vue-router，那和初始化沒有安裝vue-router的區別如下:
1. 項目的src目錄下會自動生成一個叫router目錄，router目錄下會有一個index.js文件，里面配置了HelloWorld組件匹配的路由。
2.HelloWorld組件的渲染和展示是通過\router\index.js中配置的路由匹配渲染的。