基于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 Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
微信小程序实现笑脸评分功能
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
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
使用js画图之画切线
2015/01/12 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
js实现小时钟效果
2020/03/25 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
Python发送email的3种方法
2015/04/28 Python
Python中有趣在__call__函数
2015/06/21 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
python实现输入数字的连续加减方法
2018/06/22 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
程序员跳槽必看面试题总结
2013/06/28 面试题
给排水工程师岗位职责
2013/11/21 职场文书
报到证丢失证明
2014/01/11 职场文书
绿化工程实施方案
2014/03/17 职场文书
节能环保口号
2014/06/12 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
留学推荐信怎么写
2015/03/26 职场文书