1. 程式人生 > >【VUE】Mac下vue 開發環境搭建,以及目錄結構

【VUE】Mac下vue 開發環境搭建,以及目錄結構

1 安裝Node.js

   參看 node.js環境安裝
   http://www.cnblogs.com/richerdyoung/p/7265786.html

 

2 安裝淘寶映象

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 

如果出現:Unexpected end of JSON input while parsing near *** 等錯誤執行:npm cache clean --force(清除快取)

3 安裝全域性vue-cli腳手架,用於幫助搭建所需的模板框架

sudo cnpm install -g vue-cli

輸入:vue,回車,若出現vue資訊說明表示成功

4 切換到你的專案目錄

cd desktop/vue

5 新建vue專案

vue init webpack vuetest 

6 一路回車(第4步ESLint 可以一路n,大師請忽略n)


進入新建專案

cd vuetest 

cnpm install 

npm run dev


 

目錄結構

 

  •  main.js 是我們的入口檔案,主要作用是初始化vue例項並使用需要的外掛
  • App.vue是我們的主元件,所有頁面都是在App.vue下進行切換的。其實你也可以理解為所有的路由也是App.vue的子元件。所以我將router標示為App.vue的子元件。
  • index.html檔案入口
  • src放置元件和入口檔案
  • node_modules為依賴的模組
  • config中配置了路徑埠值等
  • build中配置了
  • webpack的基本配置、開發環境配置、生產環境配置等