vue项目自定义创建新手指南

255 阅读3分钟
vue3:
  1. 创建项目:npm create vue@latest这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。
  2. 功能选择(左右键或空格选择,Enter(回车)即可):
Need to install the following packages: create-vue@3.7.5 Ok to proceed? (y) 
需要安装以下软件包:create-vue@3.7.5 可以继续吗?(y)
Project name: » 
项目名称
Add TypeScript? » No  
是否使用TypeScript(ts) 
Add JSX Support? » No
是否使用JSX支持
Add Vue Router for Single Page Application development? »  Yes
是否为单页应用程序开发添加Vue路由器
Add Pinia for state management? » Yes
是否添加Pinia
Add Vitest for Unit Testing? » No
为单元测试添加Vitest
Add an End-to-End Testing Solution? » - Use arrow-keys. Return to submit. » No 
添加端到端测试解决方案?»-使用箭头键。返回以提交。
Add ESLint for code quality? »  Yes
是否为代码质量添加ESLint
Add Prettier for code formatting? » Yes
是否为代码格式添加Prettier
  1. 打开项目;安装依赖:npm install
  2. 运行项目 npm run dev
Vue CLI​创建项目
  1. 创建项目: vue create hello-world
  2. 选择创建vue版本
Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)   //创建默认vue3项目    
  Default ([Vue 2] babel, eslint)   //创建默认vue2项目
  Manually select features          //自定义创建项目
  1. Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) 检查项目所需的功能:(按<space>选择,按<a>切换所有,按<i>反转选择,以及<enter>继续)
>(*) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
 ( ) TypeScript // TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用
 ( ) Progressive Web App (PWA) Support // 渐进式Web应用程序
 (*) Router // vue-router(vue路由)
 (*) Vuex // vuex(vue的状态管理模式)
 (*) CSS Pre-processors // CSS 预处理器(如:less、sass)
 (*) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
 ( ) Unit Testing  // 单元测试(unit tests)
 ( ) E2E Testing // e2e(end to end) 测试
Choose a version of Vue.js that you want to start the project with (Use arrow keys) 
选择要启动项目的Vue.js版本(使用箭头键)
 Use history mode for router? (Requires proper server setup for index fallback in production) NO
 是否使用路由器的历史记录模式?(需要为生产中的索引回退设置正确的服务器)
 Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
选择一个CSS预处理器(默认支持PostCSSAutoprefixerCSS模块):(使用箭头键)
Pick a linter / formatter config: Basic
选择一个linter/formatter配置:(使用箭头键)
Pick additional lint features: Lint on save
 拾取其他lint功能:(按`<space>`选择,按`<a>`切换所有,按`<i>`反转选择,按`<enter>`继续)
Where do you prefer placing config for Babel, ESLint, etc.? In package.json
 您更喜欢将BabelESLint等的配置放在哪里。
Save this as a preset for future projects? no
 是否将其保存为将来项目的预设?
  1. 打开项目;安装依赖:npm install
  2. 运行项目 npm run dev

相关网站:TypeScriptJSXESLintPrettier