创建Vue项目的两种方法(镜像和官网)

2024-06-20 22:32:40

两种搭建方法：

安装node：brew install node
查看node版本：node -v
安装npm：brew install npm
查看npm版本：npm -v

使用淘宝镜像
使用官网办法

使用淘宝镜像

全局安装 vue-cli npm install --global vue-cli
创建一个基于 webpack 模板的新项目vue init webpack my-project(这一步名称可以大写)
? Project name my-project ：设置项目名称（这一步名称必须小写）
? Project description A Vue.js project：填写项目描述
? Author runoob test@runoob.com：填写作者
? Vue build ：选择默认的Runtime + Compiler: recommended for most users
？Install vue-router? (Y/n)：是否需要路由，选择Y
? Use ESLint to lint your code? (Y/n)：是否使用EsLint编码，我不会，选择N
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes->NPM
等待安装
安装完目录是这样的

执行npm run dev

使用官网办法

安装vue/cli：npm install -g @vue/cli指定版本npm install -g @vue/cli@3.0.4
安装之前cd到自己想要安装的路径上
安装vue：vue create projectName(这里名称需要小写)

mac版./vuerc文件在用户文件夹下

Please pick a preset? 选择创建方式，这里选择Manually select features自己选择配置。

A全选，I全部反选，空格选择，上下键切换，回车确认

? Check the features needed for your project: ◯ Babel◯ TypeScript◯ Progressive Web App (PWA) Support
❯◉ Router◉ Vuex◯ CSS Pre-processors◉ Linter / Formatter◯ Unit Testing◯ E2E Testing

由于我主要精力不在前端上，所以我选择最基本的三个选项，其他后期用到会分析

? Use history mode for router? (Requires proper server setup for index fallback
in production) (Y/n)

是否使用历史模式，选择Y

? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config
❯ ESLint + Prettier

选择ESLint(代码质量工具) + Prettier(代码格式化工具) 统一代码风格

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save◯ Lint and fix on commit

我选择第一个

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arro
w keys)
❯ In dedicated config files In package.json

我选择配置单放

? Save this as a preset for future projects? (y/N)

是否记录，我选择Y

? Save preset as:

保存名字+回车

安装完目录是这样的

执行：npm run serve

打开浏览器，输入对应地址，或者直接点击地址

创建Vue项目的两种方法(镜像和官网)相关推荐

2016服务器系统进入安全模式,Windows 10进入安全模式的两种方法_win10专业版官网...
在Win10之前的Windows系统中,我们只需要在开机的时候按下"F8"键就可以选择进入到"安全模式",然而当向伙伴们升级到Win10系统之后,发现这一招不管 ...
Android Studio导入Eclipse项目的两种方法
Android Studio导入Eclipse项目有两种方法,一种是直接把Eclipse项目导入Android Studio,另一种是在Eclipse项目里面进行转换,然后再导入Android Stu ...
eclipse创建springboot项目的三种方法
eclipse创建springboot项目的三种方法方法一安装STS插件安装插件导向窗口完成后,在eclipse右下角将会出现安装插件的进度,等插件安装完成后重启eclipse生效新建spri ...
TIL：创建Java线程的两种方法
Java最强大的功能之一是它允许人们轻松管理线程以执行程序中的各种任务. 正确使用线程可以提高程序的效率. 也就是说,今天我了解了创建这些线程的两种方法: 第一种方法:实现可运行 Runnable是抽 ...
创建SpringBoot项目的两种姿势
2019独角兽企业重金招聘Python工程师标准>>> Spring应该是java项目用得最多的框架之一,Spring Boot的出现更是大简化了项目开发配置,提高了开发效率,那创建 ...
oracle的多线程怎么实现,创建线程的两个方法（Oracle官网说两种，所以我们就别说什么三种四种了）...
一.有多少种实现多线程的方法? 1.不同的角度有不同的答案 2.典型的答案有两种,分别是实现Runnable接口和继承Thread类 3.但是看原理,其实Thread类实现了Runnable接口,并且 ...
【转】Win10系统创建WiFi热点的两种方法
现在电脑和wifi已经成为很多人生活中不可缺少的一部分,上网过程只有连接WiFi才可以上网.使用windows10系统开启WiFi热点都是提示没有找到支持的无线网卡.不管你是驱动更新,重装,还是怎么操 ...
java怎么创建子线程_Java创建子线程的两种方法
摘要: 其实两种方法归结起来看还是一种,都是利用Thread的构造器进行创建,区别就是一种是无参的,一种是有参的. 一.继承Thread线程类: 通过继承Thread类,重写run方法,子类对象就可以 ...
cad添加自己线性_创建cad线型的两种方法（线型文件和linetype） - CAD自学网
作图过程中,我们最常见的线型是实线.虚线.点划线.有的时候这些基本线型可能满足不了你的需求.CAD也有自带的特殊线型,比如-HW-,这种自带文字的线型.但你想要的确实-X-.那么这便涉及到新线型的建立 ...

最新文章

热门文章