vue-cli创建vue2或vue3新项目步骤

一、安装

1. 安装:node

(已安装忽略,命令行:node -v 检查是否成功)

  • 方式一: 官网 https://nodejs.org/en/
    一直下一步安装结束(境外资源下载稍慢)
  • 方式二: 腾讯管家自带的 【软件管理】或者 https://pc.qq.com/ 搜索node下载安装(很快,其他软件中心自测)

2.cnpm或 yarn安装(非必须,npm也可以的)

yarn安装:npm install -g yarn 查看版本:yarn -v
cnpm安装:npm install -g cnpm -registry=http://registry.npm.taobao.org 查看版本:cnpm -v
(备注:不要用npm install cnpm -g安装,不要设置https的淘宝源地址,会提示证书过期被拦截:request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired)

3.安装脚手架:vue-cli

npm方式:npm install -g @vue/cli
cnpm方式:cnpm install -g @vue/cli
yarn方式:yarn global add @vue/cli

.

二、创建项目

备注:项目名不能有大写字母(示例中:project-name)。可用短横线、下划线。和命名react项目名一致

方式一:vue create project-name (可以创建vue2或者vue3,yarn方式已支持

在这里插入图片描述

第一个: 创建纯净版 vue2,(不含router、vuex、ts、单元测试等)
第二个: 创建纯净版 vue3,(同上)
第二个: 自定义 创建,(空格键:切换选中,enter回车:选择结束 - 执行

其他按键说明:
上下键:上下移动。a 键:切换选择所有。i 键:反转选择选项

(*) Choose Vue version //选择vue版本 2或者3
( ) Babel // 支持高阶语法转换
( ) TypeScript // 支持使用 TypeScript 书写源码
( ) Progressive Web App (PWA) Support // 支持PWA
( ) Router // 路由
( ) Vuex // store
( ) CSS Pre-processors // CSS 预处理器
( ) Linter / Formatter // 代码风格检查和格式化
( ) Unit Testing // 支持单元测试
( ) E2E Testing // 支持E2E测试

一般选择:Babel,Router,Vuex,CSS Pre-processors。

至于代码格式化,开发工具中都有格式化插件,基本上不需要

方式二:vue init webpack project-name (只能创建vue2)

参数说明:
Project name(工程名):回车
Project description(工程介绍):回车
Author:作者名
Vue build(是否安装编译器):回车
Install vue-router(是否安装Vue路由):回车
Use ESLint to lint your code(是否使用ESLint检查js代码):n
Set up unit tests(安装单元测试工具):n
Setup e2e tests with Nightwatch(是否安装端到端测试工具):n
Should we run npm install for you after the project has been created? (recommended):回车。

在这里插入图片描述
.

三、打开运行

打开项目:cd project-name
运行项目:npm run devcnpm run devyarn dev

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐