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

一.前言

　　本篇文章主要是使用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項目就搭建完成了。