基于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 相关文章推荐
javascript定义函数的方法
Dec 06 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
vue之延时刷新实例
Nov 14 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 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
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
php socket通信简单实现
2016/11/18 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
Django values()和value_list()的使用
2020/03/31 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
大学生毕业求职自荐书范文
2014/02/04 职场文书
目标责任书范文
2014/04/14 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
施工安全员岗位职责
2015/04/11 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers