Vue+ Element Ui 搭建前端项目框架(一)

4,809 阅读2分钟

参考

之前写项目的时候用的在网上下载的框架,现在工作之余研究了一下,舍去被人项目中冗余的东西,自己按照思路重新搭建, 有些方法还是之前框架中的方法。只用于参考,也可以自己写。

所需工具

  • 包管理工具:npm,基于node.js
  • 模块打包工具:webpack

框架体系

  • MVVM框架:Vue.js
  • 项目脚手架:vue-cli
  • UI组件库:Element UI
  • 路由配置:vue-router
  • 前端请求接口:axios
  • 状态管理工具:Vuex
  • 脚本语言:ES6语法
  • css预处理器:scss样式预处理器

搭建项目

  1. 使用vue cli 3.0 搭建项目(注:安装步骤在第一个文章里)
    cd...(文件名) 进入项目
  2. 安装Element Ui组件库 (依照官网文档安装)

3.清空页面的相关组件,并清空路由

在测试文件中使用element组件判断是否引入成功

项目目录及文件夹的分类

文件夹的分类虽然看起来是一个小问题,但是因为一般写项目时候文件会很多且项目体系庞大,所以必须梳理好项目目录结构及文件的分类,以便于以后找相关组件起来清晰明了。

不要在意我为什么倒着描述...

  • 在view文件夹存放所使用的vue组件,在这里我一般习惯于把login/404/home页放于common公共文件夹里/modules里面放页面组件
  • until文件夹里会存放一些项目使用到的公共方法/封装的函数(例如session/cookie的存取/权限判断等)
  • store状态管理仓库modules放一些不变的项目名称/键名(可以不用在store文件夹里面再建modules文件夹,看个人喜好)
  • router路由
  • components会放一些外部引入的组件(echats之类)
  • assets(scss/font/image资源文件夹)

功能实现

  • 页面跳转

在login组件给一个登录按钮 意思一下 @_@

  • 接下来配置路由实现组件的嵌套结构

持续更新...