基于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 相关文章推荐
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
两个Javascript小tip资料
Nov 23 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
element 动态合并表格的步骤
Dec 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
jquery中文乱码的多种解决方法
2013/06/21 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
Python群发邮件实例代码
2014/01/03 Python
Python批量查询域名是否被注册过
2017/06/21 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
pycharm运行scrapy过程图解
2019/11/22 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
软件设计的目标是什么
2016/12/04 面试题
Python中pass语句的作用是什么
2016/06/01 面试题
大学生职业生涯规划书模板
2014/01/03 职场文书
高二政治教学反思
2014/02/01 职场文书
励志演讲稿大全
2014/08/21 职场文书
股指期货心得体会
2014/09/13 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
建党伟业的观后感
2015/06/01 职场文书