基于Vue-cli快速搭建项目的完整步骤


Posted in Javascript onNovember 03, 2018

前言

vue-cli 是一个官方发布 vue.js 项目脚手架,Vue-cli可以快速帮助我们创建一个项目,这是官方给我们提供的脚手架。下面我说一下vue-cli的使用方法。

下面话不多说了,来一起看看详细的介绍吧

一、准备工作

在使用vue-cli时,首先需要安装nodejs,npm,其次需全局安装vue和vue-cli

1、nodejs和npm安装方法详见:https://3water.com/article/90518.htm

2、npm install -g vue

3、npm install -g vue-cli

二、vue-cli快速搭建项目

安装完成后,同时在C:\Users\Andminster\AppData\Roaming\npm目录下为会生成几个文件。

三、配置环境变量

Vue不是内部或外部命令问题解决

表示系统没有找到vue.cmd的地址,需要将vue.cmd的地址添加到系统环境变量的path中。

可以全局搜索,vue.cmd

基于Vue-cli快速搭建项目的完整步骤

右键选择“打开文件所在目录”,将该目录添加至系统环境变量path中:

基于Vue-cli快速搭建项目的完整步骤

电脑——属性——高级系统设置

基于Vue-cli快速搭建项目的完整步骤

四、安装完成后,创建自己的工作空间

在cmd切换至刚刚创建好的工作空间,如果已经有工作空间,直接切换到工作空间即可。

使用命令创建项目

vue init webpack test

test是项目名称,这个名字自己随便取。

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

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

2、Project description (A Vue.js project) 项目描述,也可直接点击回车,使用默认名字

接下来会让用户选择

3、接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设,编写vue项目时的代码风格,因为我选择了使用ESLint

4、Standard (https://github.com/feross/standard) 标准

5、AirBNB (https://github.com/airbnb/javascript) JavaScript最合理的方法,这个github地址说的是JavaScript最合理的方法

6、none (configure it yourself) 这个不用说,自己定义风格

具体选择哪个因人而异吧 ,我选择标准风格

7、Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试,我选择安装

8、Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ,我选择安装

9、完成

五、运行项目

在项目文件夹下执行npm install(安装依赖包),npm run dev(运行项目)。

在运行项目中如果遇到端口被占用,找到bulid文件夹下的webpack-dev-server.js修改port即可。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
微信小程序实现笑脸评分功能
Nov 03 #Javascript
小程序实现五星点评效果
Nov 03 #Javascript
微信小程序实现星星评价效果
Nov 02 #Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 #Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 #Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 #Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 #Javascript
You might like
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
php 启动报错如何解决
2014/01/17 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
js实现点击烟花特效
2020/10/14 Javascript
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
SQL Server笔试题
2012/01/10 面试题
八年级物理教学反思
2014/01/19 职场文书
导师推荐信范文
2014/05/09 职场文书
丽江古城导游词
2015/02/03 职场文书
体育教师研修感悟
2015/11/18 职场文书
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android