vue 创建项目

最新推荐文章于 2024-08-01 16:56:51 发布

三155

最新推荐文章于 2024-08-01 16:56:51 发布

阅读量558

点赞数 1

文章标签： vue.js typescript javascript

本文链接：https://blog.csdn.net/Beloved_Jodie/article/details/125344178

版权

项目应用构建

打开命令行安装vue-cli脚手架工具(已安装跳过此步骤)

	npm install -g @vue/cli
	# OR(或)
	yarn global add @vue/cli
	# 通过查看版本检查是否安装成功
	vue --version

命令行运行命名创建新项目

	# 创建名为mxdraw-test-vue3 的一个新Vue项目
	vue create mxdraw-test-vue3
	# 如果选择default则会直接创建项目，创建项目包括babel\eslin这些工具，比如Router/Vuex等其他依赖需要自己手动安装
	? P1ease pick a preset:
	  #  默认选项 
	  Default (vue 3)([vue 3] babel, eslint) 
	  # 手动选择功能
	  Manually select features

如果选择Manually select features(手动安装)则会进入下一步选项：（这里推荐大家进行手动配置）

	? Check the features needed for your project :
	(*) Choose vue version                    # 选择vue版本
	(*) Babel                                 # 代码编译
	(*) TypeScript                            # ts
	( ) Progressive Web App (PWA)Support      # 支持渐进式网页应用程序
	(*) Router                                # vue路由
	( ) vuex                                  # 状态管理模式
	( ) css Pre-processors                    # css预处理
	(*) Linter ; Formatter                    # 代码风格、格式校验
	( ) Unit Testing                          # 单元测试
	( ) E2E Testing                           # 端对端测试

TypeScript 选项配置

	# 选择使用哪个版本的vue框架
	? Choose a version of Vue.js that you want to start the project with
	2.x # vue2.x
	3.x # vue3.x
	# 询问的是是否使用class风格的组件语法，如果在项目中想要保持使用TypeScript的class风格的话，建议大家选择y。
	? Use class-style component syntax? (Y/n)
	# 使用Babel与TypeScript一起用于自动检测的填充?这里一定要选择y
	? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

Router 选项配置

# 路由是否使用history模式？如果项目中存在要求就使用history(即:y)，但是一般还是推荐大家使用ha模式，毕竟history模式需要依赖运维。
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

CSS Pre-processors css 选项配置

	# 选择一种CSS预处理类型，根据各个项目的要求使用对应css编译处理
	? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
	> Sass/SCSS (with dart-sass)
	  Sass/SCSS (with node-sass)
	  Less
	  Stylus

Linter / Formatter 选项配置

# TSLint只有在选择TypeScript时才会存在。
	? Pick a linter / formatter config: (Use arrow keys)
	> ESLint with error prevention only     #  只进行报错提醒
	  ESLint + Airbnb config                #  不严谨模式
	  ESLint + Standard config              #  正常模式
	  ESLint + Prettier                     #  严格模式
	  TSLint (deprecated)                   #  TypeScript格式验证工具
	# 选择校验时机，一般都会选择保存时校验，好及时做出调整
	? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
	  (*) Lint on save               # 保存时检测
	  ( ) Lint and fix on commit     # 修复和提交时检测

Unit Testing 选项配置

	# 选择单元测试解决方案，普遍用到最多的是Mocha + chai
	? Pick a unit testing solution: (Use arrow keys)
	> Mocha + Chai
	  Jest

E2E Testing E2E（End To End）选项配置

	# 选择端对端测试的类型
	? Pick a E2E testing solution: (Use arrow keys)
	> Cypress (Chrome only)
	  Nightwatch (WebDriver-based)

额外选项

	# 选择Babel,PostCSS, ESLint等自定义配置的存放位置。这里建议大家选择第一个
	? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
	> In dedicated config files     #  存放在专用配置文件中
	  In package.json               #  存放在package.json中
	# 是否保存当前选择的配置项，如果当前配置是经常用到的配置，建议选择y存储一下当前配置项
	? Save this as a preset for future projects? (y/N)
	# 选择n之后则会直接开始创建项目了，选择y之后则会输入一个存储当前配置项的名称:
	? Save preset as: