Vue 入門之目錄結構介紹

Vue 是一套用於構建用戶界面的漸進式框架，與其它大型的頁面框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。

安裝過程

• 1.從nodejs官網(http://nodejs.cn/download/)下載安裝

• 解壓到相應的文件夾

tar -xvf node-v8.1.2-linux-x64.tar.xz -C ../env/

• 創建軟連接

• sudo ln -s /home/formularoom/env/node-v8.1.2-linux-x64/bin/node /usr/local/bin/node
  sudo ln -s /home/formularoom/env/node-v8.1.2-linux-x64/bin/npm /usr/local/bin/npm

• 驗證 
  使用node -v和npm -v來驗證是否安裝成功，若安裝成功則會看到相應的版本信息。

• 2.安裝cnpm

• 安裝cnpm是由於使用npm install安裝包時速度很慢，因此建議安裝cnpm後使用cnpm install來安裝包。

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

• 安裝完成後一樣要建軟連接，不然在使用cnpm時會報No command 'cnpm' found的錯誤。

  sudo ln -s /home/formularoom/env/node-v8.1.2-linux-x64/bin/cnpm /usr/local/bin/cnpm

• 3.安裝vue-cli

  cnpm install -g vue-cli

• 安裝完成後一樣要建軟連接

• sudo ln -s /home/formularoom/env/node-v8.1.2-linux-x64/bin/vue /usr/local/bin/vue

初始化項目

命令建立一個Vue項目

vue init webpack 項目名字

而後打開終端，執行「npm install」命令安裝依賴庫。

若是開發中須要安裝一些額外的第三方庫，可使用以下面的命令：

npm install 庫名稱 –save

而後使用下面的命令啓動或者發佈項目

npm run dev //啓動項目

npm run build //發佈項目

Vue目錄結構介紹

打開新建的Vue項目，其目錄結構以下所示。

 index.html 入口頁面 build 構建腳本目錄 build-server.js 運行本地構建服務器，能夠訪問構建後的頁面 build.js 生產環境構建腳本 dev-client.js 開發服務器熱重載腳本，主要用來實現開發階段的頁面自動刷新dev-server.js 運行本地開發服務器utils.js 構建相關工具方法webpack.base.conf.js wabpack基礎配置webpack.dev.conf.js wabpack開發環境配置webpack.prod.conf.js wabpack生產環境配置 config 項目配置 dev.env.js 開發環境變量 index.js 項目配置文件prod.env.js 生產環境變量test.env.js 測試環境變量mock mock數據目錄 hello.js package.json npm包配置文件，裏面定義了項目的npm腳本，依賴包等信息src 項目源碼目錄  main.js 入口js文件app.vue 根組件 components 公共組件目錄 title.vueassets 資源目錄，這裏的資源會被wabpack構建images logo.pngroutes 前端路由 index.js store 應用級數據（state）index.jsviews 頁面目錄hello.vuenotfound.vuestatic 純靜態資源，不會被wabpack構建。test 測試文件目錄（unit&e2e）unit 單元測試 index.js 入口腳本karma.conf.js karma配置文件specs 單測case目錄 Hello.spec.js