本文适合对vue框架和webpack打包有一定了解,想要快速开发vue项目的工程师(如果想从基本vue框架手动配置学习webpack的童鞋请移步这里 Framework Vue 框架)下面开始vue-cli快速开发旅程
1、下载安装vue-cli
npm install vue-cli -g
2、初始化项目文件
vue init Project-Name
初始化是会提示以下内容:
Project name (Project-Name) //项目名称
Project description (A Vue.js project) //项目描述
Author (........) //作者
Runtime + Compiler: recommended for most users //运行加编译
Install vue-router? (Y/n) //是否安装vue-router
Use ESLint to lint your code? (Y/n) //是否使用ESLint管理代码
Pick an ESLint preset (Use arrow keys) //选择一个ESLint预设(选择)
Standard (https://github.com/feross/standard) 标准
附:文档树
src //项目源文件
assets //资源文件夹
components //组件集
router // 路由文件
config //配置文件
build //开发、测试及发布脚本文件
......
3、进入项目文件夹,安装所需依赖
cd Project-Name //进入项目
npm install //安装依赖
4、运行、发布已安装好的项目
npm run dev //开发脚本
npm run build //发布脚本
运行后的效果图:
持续更新中(欢迎评论指正).....
网友评论