vue-cli3搭建项目的详细步骤


Posted in Javascript onDecember 05, 2018

中文文档

https://github.com/vuejs/vue-docs-zh-cn

在安装之前请装好nodeJs

安装vue cli3

1. 检测vue 的版本

vue -V (V大写)
or
vue --version

2. 安装@vue/cli

npm install -g @vue/cli (ps: vue cli2的安装方法 npm install -g vue-cli )

安装全局桥插件,能兼容使用vue cli2

npm install -g @vue/cli-init

cmd命令行创建项目

1. 快速创建一个新项目

vue create name

2. 选择配置

(1). 选择配置,第一次创建项目,只有后面两个,分别是默认和手动自定义选择。第一个是我创建过后保存的,这里选择最后一个,手动选择配置

vue-cli3搭建项目的详细步骤

(2). A全选,空格键选择与取消,上下 移动

vue-cli3搭建项目的详细步骤

(3). 选择css预处理器,这里是选择less

vue-cli3搭建项目的详细步骤

(4). eslint校验方式,这里选择最后一个

vue-cli3搭建项目的详细步骤

(5). 什么时候进行校验,这里选择每次保存的时候进行校验

vue-cli3搭建项目的详细步骤

(6). 把babel,postcss,eslint这些配置文件放哪。放在各自的配置文件里 or 放在package.json,这里选择放在各自的配置文件里

vue-cli3搭建项目的详细步骤

(7). 把刚刚选择的配置文件保存起 or 不保存,保存之后就会出现在每次创建项目选择配置时,这里选择yes,然后取个配置的名字

vue-cli3搭建项目的详细步骤

(8). 按回车就开始下载@vue/cli框架,并初始化项目了

vue-cli3搭建项目的详细步骤

(9). 启动项目

npm run serve

切换项目目录,运行,项目就启动了

vue-cli3搭建项目的详细步骤

GUI界面创建项目

可以在官方自带的图形界面上创建项目,运行项目

1.启动GUI界面

vue ui

2.点击创建新项目,输入项目名字,包管理器选择npm

vue-cli3搭建项目的详细步骤

vue-cli3搭建项目的详细步骤

3.选择项目配置就可以下载@vue/cli,创建新项目了,这里选择之前保存的

vue-cli3搭建项目的详细步骤

4.任务=>serve 点击运行就可以相当于启动项目了 npm run serve 了, 可以点击输出查看控制台结果

vue-cli3搭建项目的详细步骤

配置vue.config.js

@vue/cli3搭建的新项目,没有vue-cli2 的build和config文件夹

所以有什么配置可以在根目录新建一个vue.config.js写上配置项

这里是修改接口和关闭eslint检查

module.exports = {
 lintOnSave: false,
 devServer: {
  port: 8081
 }
}

vue-cli3搭建项目的详细步骤

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
jquery tools之tooltip
Jul 25 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
jQuery操作之效果详解
May 19 jQuery
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
详解vue中async-await的使用误区
Dec 05 #Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 #Javascript
使用FormData实现上传多个文件
Dec 04 #Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 #Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 #Javascript
vue实现的双向数据绑定操作示例
Dec 04 #Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 #jQuery
You might like
关于初学PHP时的知识积累总结
2013/06/07 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
IE8 原生JSON支持
2009/04/13 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
Python安装第三方库的3种方法
2015/06/21 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
C/C++有关内存的思考题
2015/12/04 面试题
幼儿园园长自我鉴定
2013/10/22 职场文书
美术教师自我鉴定
2014/02/12 职场文书
父亲节活动策划方案
2014/08/24 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL