基于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 相关文章推荐
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 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-fpm配置详解
2014/02/12 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
js获取当前select 元素值的代码
2010/04/19 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
小学五年级学生评语
2014/04/22 职场文书
公司捐款倡议书
2014/05/14 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
病危通知书样本
2015/04/17 职场文书
山楂树之恋观后感
2015/06/11 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书