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