Vue項目的建立和UI資源

Vue項目建立打包與UI資源

1.Vue項目建立

1.1 vue-cli腳手架

vue-cli是一個基於vue的構建工具,用於搭建vue項目的環境,有着兼容,方便,快速的優勢,可以徹底遵循先後端分離的原則,用vue開發單網頁項目(SPA)的能力尤爲的好

注:能夠不用腳手架(vue-cli)就能夠基於 webpack 打包工具 ,webpack最終會把整個項目打包成一個js文件但須要本身進行配置各個版本兼容問題,正由於這樣,前端有一個專門的配置工程師

 

1.2 下載Node.js

去Node.js的官網下載最新版的node,須要用到其包管理工具npm (Node.js官網)

 

1.3 配置淘寶鏡像

由於npm是國外的,在國內用會特別慢,因此須要先用淘寶的cnpm代替npm

在命令行窗口輸入

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

配置淘寶鏡像

 

1.4 安裝vue-cli

在命令行窗口輸入 cnpm i -g vue-cli 全局安裝vue-cli腳手架

注:安裝完成後能夠使用 vue -V 查看是否安裝成功

 

1.5 安裝項目文件

先到項目文件夾,打開命令行窗口輸入vue init webpack 項目文件夾名

 

 

1.6 運行項目文件

在項目文件中使用npm run dev運行項目文件

出現

DONE Compiled successfully in 212ms

I Your application is running here: http://localhost:8080

字樣後在 http://localhost:8080 查看生產的Vue項目,出現下面的頁面證實Vue項目建立成功

 

1.7 打包項目

在項目文件夾中運行 npm run build 將項目打包 ,打包後的文件將會保存在該文件的list文件夾中

 

2.UI資源

• ElementUI 介紹：Element，一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫 連接：https://element-cn.eleme.io/#/zh-CN

• Mint UI 介紹：基於 Vue.js 的移動端組件庫 連接：https://mint-ui.github.io/#!/zh-cn

• Mui 介紹：最接近原生APP體驗的高性能前端框架 連接：http://dev.dcloud.net.cn/mui/ui/

• Aui 框架 介紹：使用了大量彈性響應式佈局，採用容器+佈局結構+控件的嵌套形式,借鑑了市場上其餘優秀UI框架 連接：http://www.auicss.com/

• we-vue 介紹：使用 Vue2.x + weui1.x 開發的組件 連接：https://github.com/tianyong90/we-vue

• Vue-Layout 介紹：vue可視化佈局 連接：https://jaweii.github.io/Vue-Layout/dist/#/

• muse-ui  連接：https://muse-ui.org/#/zh-CN/tabs