首先检查一下是否安装了vue以及vue-cli

用vue -V检查版本,如果出现’vue’ 不是内部或外部命令,也不是可运行的程序或批处理文件。则没有安装

vue -V

安装vue以及vue-cli

npm install -g vue
npm install -g  @vue/cli 

安装完后即可检查一下版本

vue -V

在这里插入图片描述

##快速打开存放项目的文件夹
在当前文件夹空白处出单击鼠标,然后按下快捷键Alt+D,这时候光标会自动聚焦到地址栏。
在这里插入图片描述
直接输入cmd,按回车
在这里插入图片描述
如上操作即可快速在命令窗口打开文件夹。

用脚手架(vue-cli)vue-cli创建项目

vue create ‘项目名’ 回车创建
在这里插入图片描述

创建项目后,配置

默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。
1.default 是默认配置。
2.Manually select features 是自己手动选择,可以选择你需要的。通常都是自己手动选择
(上下箭头切换,回车确定)
在这里插入图片描述

手动配置:需要什么自己选择(上下箭头切换 空格选中 )
1.choose Vue version 选择vue版本
2.babel:转换es6语法的这个必须要
3.typescript 看自己需不需要用
4.router管理路由的也选上
5.vuex状态管理就看自己需不需要用,通常是需要的
6.css pre样式预处理器这个也加上,vant组件库的话选择LESS
7.linter/Formatter统一代码风格
8. 最后2个分别是单元测试和端对端测试。 示例选择了几个常用的
根据上面的配置进行进一步的选择,完成之后,回车即开始构建项目

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)  
选项:
	Less
	Sass
	Stylus
	
4. Linter / Formatter 代码风格、格式校验
选择Linter / Formatter类型:Pick a linter / formatter config:
选项:
	TSLint
	ESLint 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:

出现警告

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
You will need to perform the initial commit yourself.

原因:git没有配置用户名和邮箱

解决:终端配置自己的git用户名和邮箱
git config --global user.name “username”
git config --global user.email “email”

(这里的username是你想要输入的用户名,email是你想要设定的邮箱)

配置好之后可以通过在终端输入查看自己的用户名和邮件

git config user.name
git config user.email
再通过终端重新创建项目

Logo

前往低代码交流专区

更多推荐