前置条件
- 安装 Node.js
- 全局安装 npm 包 vision-cli
简介
vision-cli 是一个基于 Vue.js 和 ElementUI 的前端快速开发框架,旨在为开发者提供一个集成了前端最佳实践的脚手架工具。同时,它也可以作为学习和研究的实验项目。
使用方法
创建项目
在命令行中执行以下命令:
$ vision init <project-name>
其中 <project-name>
为你的项目名称。执行该命令后,会自动生成一个以 <project-name>
命名的文件夹,并在其中初始化 vision-cli 项目结构。
进入项目
$ cd <project-name>
进入项目所在的文件夹。
安装依赖
$ npm install
启动项目
$ npm run serve
访问以下链接: http://localhost:8080/ 即可查看项目。
配置
在项目根目录下有一个 vue.config.js
文件,可以进行以下配置:
publicPath
:设置应用程序的基本 URL。devServer
:配置开发服务器。chainWebpack
:对内部的 webpack 配置进行更细粒度的修改。
开发说明
目录结构
-- -------------------- ---- ------- - --- ------ - ------ - --- ----------- - ---- - --- ---------- - -- ---- --- --- - ---- - --- --- - --- -- - --- ------ - ---------- - --- ---------- - ---- - --- ------ - ---- - --- ------ - ---- - --- ----- - -- - --- ------- - --- - --- ------- - ---- --- ------------ - ------ -- --- -------------- - -------- -- --- --------------- - ----- -- --- ------------ - ---- --- ------------- - --- --- --
开发规范
- 使用 ESLint 进行代码风格检查。
- 使用 Prettier 进行代码格式化。
- 每个文件只包含一个组件。
- 每个组件最好只处理一个逻辑。
结语
vision-cli 是一款十分优秀的前端框架,提供了很多方便快捷的开发工具和最佳实践,可以为开发者提供很好的开发体验和学习参考。希望这篇文章对你有所帮助!
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/66550