vue4 项目的创建

 

 

 

1，安装vue cli 脚手架，是全局安装
npm install -g @vue/cli

可以在输出信息中看到安装位置，例如：
C:\Users\xiaochangjian\AppData\Roaming\npm\node_modules\@vue

2，查看脚手架是否安装成功
vue --version

3，cmd 定位到要创建项目的目录位置

4，vue create 项目名字 如：vue create ruoyi-front-ui

通过键盘上下左右键，选择手动配置项目，出现如图文字：

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

按方向键进行上下选择
按空格 选中
按A键全选
按I键全选
按enter 确认所有配置进入下一步

----------------------------------------------------------------------------------------------------------------

选中所有：
Use class-style component syntax? (Y/n) 是否使用class风格的组件语法？

Pick additional lint features？ Lint on save // 保存就检测

 

 

? Save this as a preset for future projects? (y/N) N //是否记录下，以便下次继续使用这套配置

 

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes // 是否使用class风格的组件语法？
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes 这个选项的意思是要不要使用 babel 工具自动为转换后的 TypeScript 代码注入 polyfiills 。如果实在搞不清楚具体是什么意思，可以先不用管，直接选择 Y ，进入下一步
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes 是不是用history模式来创建路由
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less 询问项目的CSS预处理器 选择LESS
? Pick a linter / formatter config: Standard (询问项目的格式校验方式，提供一个插件化的javascript代码检测工具 ESLint + Prettier //使用较多)
? Pick additional lint features: Lint on save 询问项目的什么时候校验格式(1是保存时，2是提交时)
? Pick a unit testing solution: Mocha （Mocha 灵活，Jest 安装配置简单容易上手）
? Pick an E2E testing solution: Cypress （Cypress E2E功能测试框架 会安装很长一段时间）
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files 询问项目的配置文件存放在哪儿（1是独立文件，2是在package.json）这里选择独立的文件，选择2在后续配置postcs适配时存在问题。
? Save this as a preset for future projects? (y/N) 是否作为一个模板配置

 

 

 

 

当前项目示例：
Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)