如何快速搭建Vue项目

June 02, 2018 23:24
访问量:267
摘要:快速使用Vue搭建项目

Vue项目

目的

快速搭建前后端分离项目,提供几套可行方案,本编只介绍 vue

项目类型

  • CMS, SAAS, CRM 类后台管理项目,下面称 管理平台
  • 富展示类项目,主要面向客户,下面称 展示平台

管理平台

此类项目选集成方案时注重大而全,主要体现几点

  • 登录/注销
  • 权限验证
  • 多环境发布
  • 动态侧边栏(支持多级路由)
  • 动态面包屑
  • 富文本编辑器
  • Markdown 编辑器
  • 列表拖拽
  • 字体图标
  • 数据展示(图表)
  • Clipboard (剪贴复制)
  • 401/404错误页面
  • 动态table (拖拽,编辑)
  • 多类型表单

但是项目初始化时常常又不希望引入所有的功能,直到项目足够大时也不一定用的到全部功能

所以希望有一个 base 功能的脚手架,vue-cli 支持的脚手架过于单薄,不是首选

vue-element-admin

Github: https://github.com/PanJiaChen/vue-element-admin
Website: http://panjiachen.github.io/vue-element-admin

这是一个经历过真实项目考验的靠谱解决方案,本身是一个大而全的项目,但是提供了 base template 版本

vueAdmin-template: https://github.com/PanJiaChen/vueAdmin-template

最终确定新管理平台项目以这个 base 为基础搭建,需要扩展的功能从 vue-element-admin 主项目复制粘贴就可以了,就是简单粗暴

新项目搭建流程

# Clone project
git clone https://github.com/PanJiaChen/vueAdmin-template.git

# Install dependencies
npm install

# serve with hot reload at localhost:9528
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

关于项目细节或是原理的东西项目作者有写教程文章

同时配套一个系列的教程文章,如何从零构建后一个完整的后台项目,建议大家先看完这些文章再来实践本项目

展示平台

此类项目选方案时注重小而美,主要体现几点

  • 丰富展示内容
  • 首屏快速响应
  • SEO
  • 由于前端大多页面根据设计稿设计,所以没有合适 ui 框架推荐,但是为了满足高性能首屏和 SEO 可以选择 NUXT 进行项目构建

前提是要到官网熟悉 Nuxt.js:https://nuxtjs.org/

Nuxt.js 提供 vue-cli 的支持,有 start、express、koa 几个版本,在此推荐 koa 版本,因为方便今后在 node.js 层面的扩展

搭建过程

vue init nuxt-community/koa-template <project-name>

cd <project-name> # move to your project

npm install # or yarn install*[see note below]

# serve with hot reload at localhost:9528
npm run dev

# build for production with minification

npm run build
Make sure to use a version of vue-cli >= 2.1 (vue -V).

线上项目

评论

暂无相关评论,快来抢占沙发吧!
评论框离家出走了,点击找回!
昵称
邮箱
网站
昵称
邮箱
网站