使用vue-cli搭建項目開發環境

做者：小土豆biubiubiu

博客園：www.cnblogs.com/HouJiao/

掘金：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中配置的路由匹配渲染的。