基于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 相关文章推荐
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
vue实现购物车加减
May 30 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 一个页面执行时间类代码
2010/03/05 PHP
php简单获取目录列表的方法
2015/03/24 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
Python实现的几个常用排序算法实例
2014/06/16 Python
python生成随机mac地址的方法
2015/03/16 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
Python学习笔记之装饰器
2020/08/06 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
大学生村官典型材料
2014/01/12 职场文书
小区停车场管理制度
2014/01/27 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
质量保证书范本
2014/04/29 职场文书
体育教师求职信
2014/05/24 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
开学第一周值周总结
2015/07/16 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python