使用淘寶鏡像cnpm安裝Vue.js的圖文教程（轉載）

前言

Vue.js是前端一個比較火的MVVM框架，要使用它，咱們必須提早配置，其中有一種安裝方式是使用npm，比較適合比較大型的應用。今天就來看看這種方式如何操做，因爲npm是國外的，使用起來比較慢，咱們這裏使用淘寶的cnpm鏡像來安裝vue.

步驟

首先咱們須要下載npm，官網地址是https://nodejs.org/en/，下載msi安裝文件自由選擇安裝位置，一路next便可。而後咱們就能夠利用npm命令從獲取淘寶鏡像的cnpm了。

1.打開命令行窗口，輸入

　　

獲取到cnpm之後，咱們須要升級一下，輸入下面的命令

     

由於安裝Vue須要npm的版本大於3.0.0，因此咱們要升級一下，

而後咱們輸入下面的命令，安裝vue

 

接下來安裝vue-cli

  

此時環境就搭建好了。

2.接下來咱們須要指定一個目錄存放咱們的項目，能夠選擇任意路徑，肯定好路徑後輸入下面的命令　

   

3.成功之後，咱們進入項目所在目錄

　　cd "項目所在文件夾"

　　而後依次輸入下面的命令

     

　　成功後咱們進入瀏覽器，輸入localhost:8080會展現下面的頁面

 

 

 

 項目目錄

　　接下來咱們看看上面成功建立的項目，進入項目目錄

　　　　

咱們開發的目錄是在src,src中包含下面的目錄

　　　　

 

 

　　　　assets:存放突變

　　　　components:存放一個組件文件

　　　　App.vue:項目入口文件，咱們也能夠直接將組建寫這裏，而不使用 components 目錄

　　　　main.js:項目核心文件

咱們看看App.vue的內容

　　

src\components目錄下的Hello.vue(截圖未顯示全，大致是這樣，借用的菜鳥教程上的圖片)