1. 首先安裝node,推薦偶數版本;好了之後檢查一下: node -v;出現版本好即爲安裝成功;win10家庭版本的msi版本的時候出現無法打開,更別說安裝,可以自行百度;
2.npm install vue-cli -g; ----->>vue -V;出現版本號就是安裝成功了;
3.cd 到指定目錄; vue init webpack 項目名稱; 一些提示信息一一不說了;安裝成功之後會有提示:一般按照他的提示步驟就可以了,cd 項目文件夾,
npm install(這個是安裝 packjson.json的依賴,非常重要) , 最後運行 npm run dev; 會自動在8080端口打開網頁,那麼環境這一步是成功了;
4.介紹一下幾個非常中重要的文件(夾):
config目錄下的index.js是配置,node_modules下全部都是所要依賴模塊的文件夾;src是本地資源;比如我們要編寫的文件;其中main.js是入口文件;
5.下面介紹模塊化引入vue文件,好記性不如爛筆頭:
項目目錄部分:
比如要在App.vue中引入其他模塊;
import componentA @/components/componentA //下圖ruter-view標籤僅僅表示顯示,有組件不一定能夠顯示,必須要router-view一下;當前app.vue爲默認根模塊;
在Banana中應該這樣: <一個標準的vue文件應該包括 下面三種大類的標籤> 其中name屬性必不可少;
注意了:這裏面的不需要聲明一個 變量=new Vue({ }) 之類的,這個文件本身就代表一個實例了,在export default 內中 其實就是一個 vue字面量對象的描述,可以這樣認爲;
關於路由傳參數:(以下是main.js), 這裏有一個坑;
用 webpack vue-cli 自動構建項目後, 注意路由模塊,是放在main.js下,還是放在router文件下的index.js
廢話少說: 這裏關鍵是正確引入路由,正確配置路由(構建路由對象),每一個路由給他一個name屬性方便使用路由,在者,路由傳參中, path 最後的冒號可以寫可以不寫,前提是(以下是組件 componentA):
<router-link>中 params:{}這個對象中寫了, 寫與不寫的區別就是 不寫 在url地址欄中顯示或者不顯示; 但是在子組件中用 $router.params都可以找到;
以下爲Apple子組件: 也可取出來 {{$route.params.color}}
如何在項目中使用第三個庫呢?
比如使用jquery,首先也是 npm install [email protected] ;
在main.js(入口文件) import jquery from 'jquery'; 然後在一個組件中使用的時候 import jquery from "jquery"; 這樣jquery就是全局變量了;
也可這樣:比如使用百度的echarts庫: 在main.js引入:
上述就是目前遇到的一些基本問題;
2020-02-26更新:
按需引入element-UI :
按需引入
藉助 babel-plugin-component,我們可以只引入需要的組件,以達到減小項目體積的目的。
首先,安裝 babel-plugin-component:
npm install babel-plugin-component -D
將 .babelrc 修改爲:
npm install babel-preset-es2015 --save-dev