基于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 相关文章推荐
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
javascript实现微信分享
Dec 23 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 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
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
自荐书范文
2013/12/08 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
语文教育专业求职信
2014/06/28 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书