1. 程式人生 > >node npm vuejs element-ui安裝步驟

node npm vuejs element-ui安裝步驟

1.下載對應本機環境安裝 nodejs 預設NPM已經整合 

  https://nodejs.org/zh-cn/
  
  開啟cmd直接輸入測試是否安裝成功

  node測試 node -v 

  NPM 測試 npm -v

2.安裝淘寶映象。

  開啟cmd直接輸入:npm install -g cnpm –registry=https://registry.npm.taobao.org,回車,等待安裝...

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

3.安裝webpack 。

  cnpm install -g webpack
  
4.安裝vue

  cnpm install vue
 
5.安裝 vue-cli。

  cnpm install -g vue-cli
  
6.安裝 element-ui。

 cnpm i element-ui -S
 
7.安裝 mockjs 演示資料安裝(選擇安裝)

  npm install mockjs

8.環境安裝完畢 現在可以建立一個專案。

  選擇專案所在資料夾 shift+右鍵 選擇在此處開啟命令視窗
  
  專案建立命令:vue init webpack vue-projectname。
  
  projectname--專案資料夾的名稱(名字不能用中文),這個vue-projectname資料夾會自動生成在你跳轉到的工作目錄中。

  vue init webpack vue-projectname
  
  注意:安裝過程中,需要自行輸入專案名稱,描述,作者等等, 按照提示操作。
  
  
9.選擇專案所在資料夾 shift+右鍵 選擇在此處開啟命令視窗 執行命令cnpm install 安裝依賴包。

  cnmp install

      目錄/檔案          說明
  
      build              最終釋出的程式碼存放位置。
      config          配置目錄,包括埠號等。
      node_modules      npm 載入的專案依賴模組
      src              這裡是我們要開發的目錄,基本上要做的事情都在這個目錄裡。裡面包含了幾個目錄及檔案:
      assets:         放置一些圖片,如logo等。
      components:     目錄裡面放了一個元件檔案,可以不用。
      App.vue:        專案入口檔案,我們也可以直接將元件寫這裡,而不使用 components 目錄。
      main.js:        專案的核心檔案。
      static          靜態資源目錄,如圖片、字型等。
      test              初始測試目錄,可刪除
      .xxxx檔案          這些是一些配置檔案,包括語法配置,git配置等。
      index.html      首頁入口檔案,你可以新增一些 meta 資訊或同統計程式碼啥的。
      package.json      專案配置檔案。
      README.md          專案的說明文件,markdown 格式
  
10.啟動測試專案是否安裝成功。

  cnpm run dev

  注意:開啟config目錄下的index.js 預設是8080埠 可以修改為你想要的埠號
  
  
11.生產環境部署。選擇專案所在資料夾 shift+右鍵 選擇在此處開啟命令視窗 執行命令

  npm run build

  注意:dist 下生生成的檔案就是我們要部署的檔案
  

相關技術:

  vuejs2.0:漸進式JavaScript框架,易用、靈活、高效,似乎任何規模的應用都適用。

  element:基於vuejs2.0的ui元件庫。

  vue-router:一般單頁面應用spa都要用到的前端路由。

  vuex:Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。