当前位置: 首页 > news >正文

vue-cli3搭建项目

中文文档
https://github.com/vuejs/vue-...
在安装之前请装好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 (vue-cli2创建项目:vue init webpack name )

2. 选择配置

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

clipboard.png

(9). 启动项目

 npm run serve (vue-cli2启动项目:npm run dev)

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

clipboard.png

GUI界面创建项目

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

1.启动GUI界面

 vue ui 

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

clipboard.png

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

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

clipboard.png

配置vue.config.js

@vue/cli3搭建的新项目,没有vue-cli2 的build和config文件夹
所以有什么配置可以在根目录新建一个vue.config.js写上配置项
这里是修改接口和关闭eslint检查

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

clipboard.png

相关文章:

  • Spark ShuffleDependency Shuffle依赖关系
  • 第一课_设备树的引入与体验(基于linux4.19内核版本)
  • 微软宣布开源WPF、WinForms和WinUI
  • 编写目的和概述的资料搜集与分析
  • channel的高级玩法
  • SmartBear SoapUI Pro入门教程--第一次功能测试(二)
  • 【LDAP安装】在已编译安装的PHP环境下安装LDAP模块
  • Python数据可视化2018:数据可视化库为什么这么多?
  • 如何用纯 CSS 创作一个“女神来了,快让路”的动画
  • 3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)
  • ThinkPHP/---ajax 改变状态实例
  • 【.NET】AutoMapper学习记录
  • Javassm连接数据库报错129 ERROR [com.alibaba.druid.pool.DruidDataSource] - {dataSource-1} init error...
  • 从AI医疗到量子计算,亚洲研究院如何成为微软发展的生命力?
  • java B2B2C Springboot仿淘宝电子商城系统--Spring Cloud Gateway
  • [LeetCode] Wiggle Sort
  • 【剑指offer】让抽象问题具体化
  • 【跃迁之路】【463天】刻意练习系列222(2018.05.14)
  • Babel配置的不完全指南
  • Centos6.8 使用rpm安装mysql5.7
  • CSS相对定位
  • HTTP中GET与POST的区别 99%的错误认识
  • JavaScript对象详解
  • JavaScript函数式编程(一)
  • Java教程_软件开发基础
  • MD5加密原理解析及OC版原理实现
  • nodejs实现webservice问题总结
  • 使用Maven插件构建SpringBoot项目,生成Docker镜像push到DockerHub上
  • 体验javascript之美-第五课 匿名函数自执行和闭包是一回事儿吗?
  • [地铁译]使用SSD缓存应用数据——Moneta项目: 低成本优化的下一代EVCache ...
  • 《TCP IP 详解卷1:协议》阅读笔记 - 第六章
  • $(function(){})与(function($){....})(jQuery)的区别
  • (1综述)从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练
  • (4)事件处理——(6)给.ready()回调函数传递一个参数(Passing an argument to the .ready() callback)...
  • (C语言版)链表(三)——实现双向链表创建、删除、插入、释放内存等简单操作...
  • (二)什么是Vite——Vite 和 Webpack 区别(冷启动)
  • (分布式缓存)Redis持久化
  • (附源码)spring boot公选课在线选课系统 毕业设计 142011
  • (附源码)ssm高校运动会管理系统 毕业设计 020419
  • (一)使用Mybatis实现在student数据库中插入一个学生信息
  • (转)菜鸟学数据库(三)——存储过程
  • .NET CORE 3.1 集成JWT鉴权和授权2
  • .net redis定时_一场由fork引发的超时,让我们重新探讨了Redis的抖动问题
  • .net 发送邮件
  • .NET 解决重复提交问题
  • .NET和.COM和.CN域名区别
  • .Net中间语言BeforeFieldInit
  • .pub是什么文件_Rust 模块和文件 - 「译」
  • [ vulhub漏洞复现篇 ] Celery <4.0 Redis未授权访问+Pickle反序列化利用
  • [20190416]完善shared latch测试脚本2.txt
  • [C#][opencvsharp]opencvsharp sift和surf特征点匹配
  • [C#小技巧]如何捕捉上升沿和下降沿
  • [E链表] lc83. 删除排序链表中的重复元素(单链表+模拟)
  • [GN] Vue3.2 快速上手 ---- 核心语法2
  • [iphone-cocos2d]关于Loading的若干处理和讨论