vue-cli如何快速构建vue项目


Posted in Javascript onApril 26, 2017

vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。

 1、安装vue-cli

使用npm全局安装vue-cli(前提是已经安装了nodejs,否则连npm都用不了)

$ npm install -g vue-cli

2、创建自己的工作空间

$ vue init webpack vuetest

3、项目信息

命令输入后,会进入安装阶段,需要用户输入一些信息

Project name (vuetest)

项目名称,可以自己指定,也可直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters)

Project description (A Vue.js project) 
//项目描述

项目描述,也可直接点击回车,使用默认名字

Author (........)       //作者

4、用户选择

Install vue-router? (Y/n)

是否安装vue-router,这是官方的路由。这里就输入“y”后回车即可。

Use ESLint to lint your code? (Y/n)

是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,并不会影响整体的运行,这也是为了多人协作。用则选Y

Standard (https://github.com/feross/standard)

标准,什么标准呢,去给提示的standardgithub地址看一下, 原来时js的标准风格

AirBNB (https://github.com/airbnb/JavaScript)

JavaScript最合理的方法,这个github地址说的是JavaScript最合理的方法

Setup unit tests with Karma + Mocha? (Y/n)

是否安装单元测试

Setup e2e tests with Nightwatch(Y/n)?

是否安装e2e测试

5、切换到项目目录

cd vuetest

6、安装依赖

npm install

7、运行

npm run dev

8、自动打开默认浏览器显示页面

vue-cli如何快速构建vue项目

9、目录简要说明

├── build

// 项目构建(webpack)相关代码

│ ├── build.js

// 生产环境构建代码

│ ├── check-versions.js

// 检查node&npm等版本

│ ├── dev-client.js

// 热重载相关

│ ├── dev-server.js

// 构建本地服务器

│ ├── utils.js

// 构建配置公用工具

│ ├── vue-loader.conf.js

// vue加载器

│ ├── webpack.base.conf.js

// webpack基础配置

│ ├── webpack.dev.conf.js

// webpack开发环境配置

│ └── webpack.prod.conf.js

// webpack生产环境配置

├── config

// 项目开发环境配置

│ ├── dev.env.js

// 开发环境变量

│ ├── index.js

// 项目一些配置变量

│ └── prod.env.js

// 生产环境变量

├──node_modules

// 项目依赖的模块

├── src

// 源码目录

│ │ ├── assets

// 资源目录

│ │ └── logo.png



│ ├── components

// vue公共组件

│ │ └── Hello.vue



│ ├──router

// 前端路由

│ │ └── index.js

// 路由配置文件

│ ├── App.vue

// 页面入口文件

│ └── main.js

// 程序入口文件

└── static

// 静态文件,比如一些图片,json数据等

│ ├── .gitkeep



├── .babelrc

// ES6语法编译配置

├── .editorconfig

// 定义代码格式

├── .gitignore

// git上传需要忽略的文件格式

├── index.html

// 入口页面

├── package.json

// 项目基本信息

├── README.md

// 项目说明

以上目录选择了独立构建模式,安装vue-router,但没有安装ESLint、单元测试、e2e测试。

希望本文所述对你有所帮助,vue-cli如何快速构建vue项目内容就给大家介绍到这里了。希望大家继续关注我们的网站!想要学习vue可以继续关注本站。

Javascript 相关文章推荐
UserData用法总结 lanyu出品
Jul 01 Javascript
基于jquery的商品展示放大镜
Aug 07 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
微信开发 微信授权详解
Oct 21 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
Vue制作Todo List网页
Apr 26 #Javascript
bootstrap table表格使用方法详解
Apr 26 #Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 #Javascript
windows下vue-cli导入bootstrap样式
Apr 25 #Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 #Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 #Javascript
vuejs如何配置less
Apr 25 #Javascript
You might like
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
Javascript中神奇的this
2016/01/20 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
python实现井字棋游戏
2020/03/30 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
Python测试人员需要掌握的知识
2018/02/08 Python
Python中@property的理解和使用示例
2019/06/11 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
AC Lens:购买隐形眼镜
2017/02/26 全球购物
亚马逊印度站:Amazon.in
2017/10/15 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
杭州-DOTNET笔试题集
2013/09/25 面试题
优秀技术工人先进材料
2014/02/17 职场文书
卖车协议书范例
2014/09/16 职场文书
一般党员对照检查材料
2014/09/24 职场文书
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
Golang bufio详细讲解
2022/04/21 Golang
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python