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 function定义函数使用心得
Apr 15 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
js实现3D旋转相册
Aug 02 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过滤敏感词的示例
2014/03/31 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
浅谈node的事件机制
2017/10/09 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
Python基于有道实现英汉字典功能
2015/07/25 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
Python读取表格类型文件代码实例
2020/02/17 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
python算的上脚本语言吗
2020/06/22 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
Delphi软件工程师试题
2013/01/29 面试题
自我评价怎么写正确呢?
2013/12/02 职场文书
创业融资计划书
2014/04/25 职场文书
对教师的评语
2014/04/28 职场文书
兽医医药专业求职信
2014/07/27 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
单位计划生育责任书
2015/05/09 职场文书