vue-cli3.0 开发环境构建

一. 若已全局安装vue-cli (1.x 或 2.x),需先卸载

npm uninstall vue-cli -g 

二. 全局安装 vue-cli3.0

npm install -g @vue/cli

三. node版本要求 Node >=8.9,可以使用 nvm 管理多个 Node 版本。
在这里插入图片描述

  1. 安装nvm https://github.com/coreybutler/nvm-windows/releases
  2. 安装node–> nvm install 版本号 window系统位数
    在这里插入图片描述
  3. 显示所有安装的版本 nvm ls
    在这里插入图片描述
  4. 切换node版本 nvm use 版本号
    在这里插入图片描述
    四.创建项目
vue create 项目名

1. 进入功能配置选择

 (1. default (babel, eslint) 默认预设配置 babel, eslint(2. Manually select features  手动选择配置

在这里插入图片描述
5. enter后,进入手动选择配置 ,有以下Installed CLI Plugins选项(注:空格单选,a全选,i反向全选)

(1. babel
(2. TypeScript  
(3. Progressive Web App (PWA) Support  支持渐进式网页应用程序
(4. Router 路由管理器
(5. Vuex 状态管理模式(构建一个中大型单页应用时)
(6. CSS Pre-processors css预处理
(7. Linter / Formatter 代码风格、格式校验
(8. Unit Testing 单元测试
(9. E2E Testing E2E(End To End)即端对端测试

在这里插入图片描述
6. enter后,Installed CLI Plugins配置细节
(1 TypeScript

是否使用class风格的组件语法:Use class-style component syntax?
是否使用babel做转义:Use Babel alongside TypeScript for auto-detected polyfills?

(2. Router 路由管理器

路由使用历史模式:Use history mode for router? (Requires proper server setup for index fallback in production) 

(3. CSS Pre-processors css预处理

选择CSS 预处理类型:Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)  
选项:LessSassStylus

(4. Linter / Formatter 代码风格、格式校验

选择Linter / Formatter类型:Pick a linter / formatter config:
选项:TSLintESLint with error prevention only  仅错误预防ESLint + Airbnb config  Airbnb配置ESLint + Standard config 标准配置ESLint + Prettier
选择lint方式:Pick additional lint features
选项:Lint on save 保存时检查Lint and fix on commit 提交时检查

(5. Unit Testing 单元测试

选择unit testing类型:Pick a unit testing solution: (Use arrow keys)
选项:Mocha + Chai  Jest 

(6. E2E Testing E2E(End To End)即端对端测试

选择E2E testing类型:Pick a E2E testing solution: (Use arrow keys)
选项:Cypress (Chrome only) Nightwatch (Selenium-based)

(7. 选择 Babel, PostCSS, ESLint 等自定义配置的存放位置

 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?选项:In dedicated config files 在专用的配置文件中In package.json 在package.json

(8. 将此作为将来项目的预置吗?

 Save this as a preset for future projects?选项:In dedicated config files 在专用的配置文件中In package.json 在package.json

(9.保存预设为

Save preset as:

(10.回车后开始构建

五.项目启动

1.进入目录

cd ydc-vue3 

2.运行

npm run serve

3.运行地址

App running at:- Local:   http://localhost:8080/- Network: http://192.168.1.90:8080/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407320.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Git之集中式vs分布式

集中式: 集中式版本控制系统,版本库是集中存放在中央服务器的,而干活的时候,用的都是自己的电脑,所以要先从中央服务器取得最新的版本,然后开始干活,干完活了,再把自己的活推送给中…

HDU 1244 Max Sum Plus Plus Plus

虽然这道题看起来和 HDU 1024 Max Sum Plus Plus 看起来很像,可是感觉这道题比1024要简单一些 前面WA了几次,因为我开始把dp[22][maxn]写成dp[maxn][22]了,Orz 看来数组越界不一定会导致程序崩溃,也有可能返回一个错误的结果 dp[…

IDEA控制台乱码

报错情况: 报错原因:Idea的vm用的编码格式不一致:需要修改为UTF-8 你看Tomcat我之前下在后修改果,就没有报错,新人刚下载也有乱码问题 问题解决: 按我步骤来一定对 下面这俩文件打开输入: -D…

Git之创建版本库

什么是版本库呢?版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改、删除,Git都能跟踪,以便任何时刻都可以追踪历史&#…

Leetcode刷题(3)整数反转

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1题目 给你一个 32 位的有符号整数 x ,返回将 x 中的数字部分反…

Git之diff和status

我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容: 现在,运行git status命令看看结果 git status命令可以让我们时刻查看工…

TCP为何采用三次握手来建立连接,若采用二次握手可以吗

1. TCP简介 TCP(Transmission Control Protocol 传输控制协议)是一种面向连接(连接导向)的、可靠的、基于IP的传输层协议,采用三次握手确认建立一个连接。 TCP为了保证报文传输的可靠[1],就给每个包一个序号…

Leetcode刷题(4)罗马数字转整数

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 罗马数字包含以下七种字符: I, V, X, L&a…

深入理解移动前端开发之viewport

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通…

Git之版本回退

像这样,你不断对文件进行修改,然后不断提交修改到版本库里,就好比玩RPG游戏时,每通过一关就会自动把游戏状态存盘,如果某一关没过去,你还可以选择读取前一关的状态。有些时候,在打Boss之前&…

Leetcode刷题(5)最长公共前缀

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀&…

Internal Server Error - http code 500

Eror Example 1 :转载于:https://www.cnblogs.com/shuman/p/3938096.html

Git之工作区和暂存区

工作区(Working Directory) 就是你在电脑里能看到的目录,比如我的learngit文件夹就是一个工作区 版本库(Repository) 工作区有一个隐藏目录.git,这个不算工作区,而是Git的版本库 Git的版本库…

vue移动端html5页面根据屏幕适配的四种解决方法

最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心。下次想起来了的话,进行总结分享一下如何处理。在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块主要有死个方法可以适用。…

javascript学习系列(12):数组中的join方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说j…

Git之管理修改

现在,假定你已经完全掌握了暂存区的概念。下面,我们要讨论的就是,为什么Git比其他版本控制系统设计得优秀,因为Git跟踪并管理的是修改,而非文件 你会问,什么是修改?比如你新增了一行&#xff0…

javascript学习系列(14):数组中的indexOf方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说…

Git之撤销修改

自然,你是不会犯错的。不过现在是凌晨两点,你正在赶一份工作报告,你在readme.txt中添加了一行 在你准备提交前,一杯咖啡起了作用,你猛然发现了“stupid boss”可能会让你丢掉这个月的奖金! 既然错误发现得…

glibc与MSVC CRT(转载)

glibc与MSVC CRT 运行库是平台相关的,因为它与操作系统结合得非常紧密。C语言的运行库从某种程度上来讲是C语言的程序和不同操作系统平台之间的抽象层,它将不同的操作系统API抽象成相同的库函数。比如我们可以在不同的操作系统平台下使用fread来读取文件…