vue3 学习--创建项目

使用 @vue/cli 创建项目(4.5版本以上)

 1. vue create <项目名>
	? Please pick a preset: (Use arrow keys)
	> Default ([Vue 2] babel, eslint)      -------- 默认vue2模板
	  vue3-project ([Vue 3] node-sass, babel, typescript, router, vuex, eslint)   --------自己之前保存的vue3模板
	  Default (Vue 3 Preview) ([Vue 3] babel, eslint)      --------------默认vue3模板
	  Manually select features   ------------------手动选择(推荐)


	? Check the features needed for your project:
	 (*) Choose Vue version          --------------------是否选择vue版本
	 (*) Babel                                 --------------------是否需要安装babel
	 (*) TypeScript                          --------------------是否使用ts
	 ( ) Progressive Web App (PWA) Support   ---------------是否需要支持web app
	 (*) Router                              --------------------- 是否安装router
	 (*) Vuex                                ----------------------  是否安装vuex
	>(*) CSS Pre-processors      ---------------------css 预处理器选择
	 (*) Linter / Formatter          -------------------------校验规则选择
	 ( ) Unit Testing                 -------------------------  单元测试
	 ( ) E2E Testing           ------------------------------- 端到端测试

	? Choose a version of Vue.js that you want to start the project with  --------------------选择vue版本
	  2.x
	> 3.x (Preview)
	
	Use class-style component syntax? (y/N) N   -----------------是否使用class风格装饰器

	Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, trans
	piling JSX)? (Y/n) Y           ------------------------使用Babel与TypeScript一起用于自动检测的填充

	Use history mode for router? (Requires proper server setup for index fallback in product
	ion) (Y/n) Y     -------------------- 使用历史模式路由

	? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default
	):    --------------------------------------选择css预编译器
	  Sass/SCSS (with dart-sass)
	> Sass/SCSS (with node-sass)
	  Less
	  Stylus
	
	? Pick a linter / formatter config:     -----------选择规则
	  ESLint with error prevention only
	  ESLint + Airbnb config
	  ESLint + Standard config
	> ESLint + Prettier
	  TSLint (deprecated)
	
	? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to inver
	t selection)    ------------------------------选择格式化时机
	>(*) Lint on save
	 ( ) Lint and fix on commit
	
	? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)    --------------------------选择配置文件
	> In dedicated config files    ------------------外部创建配置文件   例:vue.config.js/ts
	  In package.json        -----------------------在此文件内部配置
	
	Save this as a preset for future projects? (y/N) N   ---------------------是否保存为模板 

使用 vite 创建项目

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev


$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev


注意: 此方法只会创建原始文件,不会安装css预编译器,vuex,路由等插件