vue全家桶 ---建立一個新的vue項目

本文涉及到webpack、node.js、vue、vue-router、vuex、axios、less、element-ui、es六、git等相關知識。

一、前提基礎

• vue.js有著名的全家桶系列，包含了vue-router、vuex、axios，再加上構建工具vue-cli，就是一個完整的vue項目的核心構成。
• 學習本文以前須要掌握基本的js、css、html基礎知識
• node.js、git、webpack基礎知識
• 對vue.js、vuex等有基本的瞭解
• vue官網：cn.vuejs.org/v2/guide/
• vue-router官網：router.vuejs.org/zh/

二、開發環境

1. 安裝node.js,直接去官網下載安裝包便可：nodejs.org/en/，安裝完成之後能夠打開cmd/git,經過node -v/npm -v 查看版本。

   

2. 安裝webpack, 經過npm install -g webpack全局安裝。
3. 安裝git(用於代碼管理)，直接百度下載安裝包便可

三、開始開發

1. 這裏咱們採用vue-cli搭建一個新的項目，因此須要先安裝腳手架 npm install --g vue-cli。
2. 初始化一個項目：vue init webpack vue_demo_project，由於要用到vue-router,全部這裏選擇安裝vue-router，建議安裝ESlint，有助於養成良好的編程習慣。

   

3. 安裝依賴：cd vue_demo_project, npm install (若是安裝速度較慢，可使用cnpm安裝，npm install -g cnpm --registry=https://registry.npm.taobao.org)。
4. 在編輯器中打開項目，在根目錄下運行npm run dev。默認是8080 端口，能夠在config裏的index.js修改。

   

   ps：建議將build 裏的assetsPublicPath的路徑前綴修改成 ' ./ '，由於打包以後，外部引入 js 和 css 文件時，若是路徑以 ' / ' 開頭，在本地是沒法找到對應文件的（服務器上沒問題）。因此若是須要在本地打開打包後的文件，就得修改文件路徑。

四、到這裏咱們已經成功的建立一個新的vue項目。