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,一经查实,立即删除!

相关文章

不要以为学java,.net或VB的就很牛

我现在是自己做,但我此前有多年在从事软件开发工作,当回过头来想一想自己,觉得特别想对那些初学JAVA/DOT .NET技术的朋友说点心里话,希望你们能从我们的体会中,多少受点启发(也许我说的不好,你不赞同但看在…

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[…

谁优谁劣?——AMD与Intel产品对比分析

谁优谁劣?——AMD与Intel产品对比分析1. AMD与Intel的产品线概述AMD目前的主流产品线按接口类型可以分成两类,分别是基于Socket 754接口的中低端产品线和基于Socket 939接口的中高端产品线;而按处理器的品牌又分为Sempron、Athlon 64、Optero…

IDEA控制台乱码

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

在Hibernate的session中同时有两个相同id的同类型对象,修改失败

若在Hibernate的session中同时有两个相同id的同类型对象,修改会失败,报错:a different object with the same identifier value was already 解决方案: 使用merge() 如下情景: User u dao.getUser(...) ; User u2 ..…

[Linux] undefined reference to `itoa'

在linux写了个简单的C程序,里面用到了itoa,但是编译时提示“undefined reference to itoa”,本以为加上-lc就行了,可结果还是一样。上网发现,有人说这个函数在linux中是不存在的,一般用sprintf来代替。看下…

React开发(119):代码原因

<Form.Item label"协议" name"模板文件" required>{getFieldDecorator(agreementFilePath[${k}], {})(<Uploadmultiple{false}onChange{this.handleFileChange}beforeUpload{this.beforeUpload}customRequest{(data) > this.onUpload(data, k)…

Git之创建版本库

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

显示环境变量的值

/*功能&#xff1a;显示环境变量的值*/#include <stdio.h>extern char **environ;// 查找环境变量的值&#xff0c;与系统调用getenv()功能相同char* findenv(char *name) // 在环境变量中查找指定的变量名&#xff0c;如找到&#xff0c;则返回其值(后的字符串){int l…

reading notes -- Amazon.com Recommendations: Item-to-Item Collaborative Filtering

中英译本及下载&#xff1a;http://blog.sina.com.cn/s/blog_586631940100pduh.html 以下是摘要笔记&#xff1a; 算法应当结合用户的习惯&#xff0c;用户特点的分类 观影习惯是比较单一 还是比较分散 这是不同的 一、推荐的宗旨&#xff1a;推荐应该要帮助顾客找到和发现新的…

Leetcode刷题(3)整数反转

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

Git之diff和status

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

移动端H5终端适配方案

1.JS的根据不同屏幕宽度动态设置html的font-size&#xff0c;使用rem布局。 a.手淘方案 flexiblerem&#xff08;参考https://github.com/amfe/article/issues/17&#xff09; 引入flexible.js&#xff0c;不需要在html结构中加入viewport标签。 flexible.js会在元素上增加一…

WWW超文本源码浏览器

Linux下的C程序&#xff1a;读取远程服务器上的网页源码。 /*功能&#xff1a;WWW超文本源码浏览器 */#include <stdio.h> #include <stdlib.h> #include <string.h> #include <stdarg.h> #include <sys/socket.h> #include <netinet/in.h&g…

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

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

在asp.net中备份还原SQL Server数据库

在web中&#xff0c;安全性主要体现在两个方面&#xff1a;一个是程序安全性&#xff0c;即防止网页在插入恶意代码&#xff1b;另一个是数据库安全性&#xff0c;这个我们可以经常备份数据库来实现。在文中&#xff0c;我将演示如果在网页中备份和恢复数据库。其实备份和恢复数…

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

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

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

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