当前位置: 首页 > 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
  • 【跃迁之路】【444天】程序员高效学习方法论探索系列(实验阶段201-2018.04.25)...
  • Dubbo 整合 Pinpoint 做分布式服务请求跟踪
  • Java 网络编程(2):UDP 的使用
  • JavaScript 无符号位移运算符 三个大于号 的使用方法
  • Java编程基础24——递归练习
  • JAVA多线程机制解析-volatilesynchronized
  • Java知识点总结(JavaIO-打印流)
  • Mysql优化
  • Netty 4.1 源代码学习:线程模型
  • Spring Boot MyBatis配置多种数据库
  • Spring-boot 启动时碰到的错误
  • SpriteKit 技巧之添加背景图片
  • VirtualBox 安装过程中出现 Running VMs found 错误的解决过程
  • vue 配置sass、scss全局变量
  • Vue.js源码(2):初探List Rendering
  • 阿里云购买磁盘后挂载
  • 从重复到重用
  • 工作踩坑系列——https访问遇到“已阻止载入混合活动内容”
  • 精益 React 学习指南 (Lean React)- 1.5 React 与 DOM
  • 利用jquery编写加法运算验证码
  • 译有关态射的一切
  • 原创:新手布局福音!微信小程序使用flex的一些基础样式属性(一)
  • 《TCP IP 详解卷1:协议》阅读笔记 - 第六章
  • 阿里云ACE认证之理解CDN技术
  • 如何在 Intellij IDEA 更高效地将应用部署到容器服务 Kubernetes ...
  • 完善智慧办公建设,小熊U租获京东数千万元A+轮融资 ...
  • ​ubuntu下安装kvm虚拟机
  • !!Dom4j 学习笔记
  • #我与Java虚拟机的故事#连载05:Java虚拟机的修炼之道
  • #我与Java虚拟机的故事#连载11: JVM学习之路
  • $.ajax()方法详解
  • $.ajax中的eval及dataType
  • (16)Reactor的测试——响应式Spring的道法术器
  • (二)丶RabbitMQ的六大核心
  • (三) prometheus + grafana + alertmanager 配置Redis监控
  • (算法)前K大的和
  • (一)80c52学习之旅-起始篇
  • (一)Thymeleaf用法——Thymeleaf简介
  • (转)C#开发微信门户及应用(1)--开始使用微信接口
  • .NET DataGridView数据绑定说明