基于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连连看源码完美注释版(推荐)
Dec 09 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
微信小程序实现购物车代码实例详解
Aug 29 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 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中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
新闻内页-JS分页
2006/06/07 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
jquery replace方法去空格
2017/05/08 jQuery
js数组实现权重概率分配
2017/09/12 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
python实现合并两个排序的链表
2019/03/03 Python
Django中的静态文件管理过程解析
2019/08/01 Python
Python print不能立即打印的解决方式
2020/02/19 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
团日活动总结模板
2014/06/25 职场文书
2014年教师节活动总结
2014/08/29 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
2014年团支书工作总结
2014/11/14 职场文书
环保宣传语大全
2015/07/13 职场文书
学校教师培训工作总结
2015/10/14 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
mysql知识点整理
2021/04/05 MySQL
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
详解MySQL集群搭建
2021/05/26 MySQL