vue-cli创建vue2或vue3新项目步骤【留底收藏】
vue-cli创建vue2或vue3新项目步骤 1. 安装:node(已安装忽略,命令行:node -v 检查是否成功)2.cnpm或 yarn安装(非必须,npm也可以的)yarn安装:npm install -g yarn 查看版本:yarn -vcnpm安装:npm install -g cnpm -registry=https://registry.npm.taobao.org 查看版本:
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 dev 或 cnpm run dev 或 yarn dev
更多推荐
所有评论(0)