devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue进阶

作者：我家小花儿 | 2024-06-06 11:17:50

赞

踩

vue进阶

一、构建模块化环境

1. Vue脚手架

@vue/cli是一个Vue脚手架，用来快速构建模块化项目结构，基于webpack

安装@vue/cli：

  • 全局安装：npm install @vue/cli -g （需要具有管理员权限）

  • 验证安装：vue --version

常用命令：

  • 创建项目：vue create 项目名　或　vue ui

  • 为项目增加扩展插件：vue add 插件

2. 使用脚手架创建项目

切换到项目的存放目录，执行 vue create 项目名称，进入交互模式

  1. # 1.选择构建模式
  2. Vue CLI v5.0.8
  3. ? Please pick a preset: (Use arrow keys)
  4.     default (babel, eslint)  # 默认选项，只包含基础依赖 ——> 直接执行第6步
  5. ❯ Manually select features # 自定义环境，手动选择特性依赖
  6.   
  7. # 2.自定义环境的选择
  8. Vue CLI v5.0.8
  9. ? Please pick a preset: Manually select features
  10. ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) # 选择需要的环境特性 
  11. ❯◉ Babel # ES6语法兼容转换器（Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，避免运行环境不支持）
  12.  ◯ TypeScript # TS语法支持
  13.  ◯ Progressive Web App (PWA) Support # 构建渐进式Web应用，优化用的
  14.  ◯ Router # 集成路由功能
  15.  ◯ Vuex # 集成统一数据状态管理器
  16.  ◉ CSS Pre-processors # CSS预编译，支持使用LESS、SASS等动态样式语言
  17.  ◉ Linter / Formatter # 代码规范检查和格式化检测
  18.  ◯ Unit Testing # 单元测试
  19.  ◯ E2E Testing # 端到端测试
  20.  
  21. # 3.所选环境的进一步配置
  22. # 如果选择了CSS Pre-processors，则需要选择 动态样式语言
  23. ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
  24.     Sass/SCSS (with dart-sass) 
  25.   Sass/SCSS (with node-sass) 
  26. ❯ Less 
  27.   Stylus 
  28. # 如果选择Linter / Formatter，则需要选择 代码规范检查的规则
  29. ? Pick a linter / formatter config: (Use arrow keys)
  30. ❯ ESLint with error prevention only # 使用ESLint，仅检测错误（ESLint是用来统一代码规范和风格的工具）
  31.   ESLint + Airbnb config # 使用 eslint+airbnb 前端规范
  32. 　ESLint + Standard config # 使用标准规范
  33.   ESLint + Prettier # 使用严格规范
  34. # 选择代码规范检查的时机
  35. ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
  36. ❯◉ Lint on save # 文件保存时
  37.  ◯ Lint and fix on commit # 代码整理和提交时
  38.  
  39. # 4.选择工具配置文件的存放位置
  40. ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
  41. ❯ In dedicated config files  # 存放在独立的配置文件中
  42.   In package.json # 集成在package.json文件中
  43.   
  44. # 5.是否将上述配置保存为一个预设选项，方便以后创建项目使用
  45. ? Save this as a preset for future projects? Yes
  46. ? Save preset as: mypreset
  47. ​
  48. # 6.创建项目，安装所需依赖
  49. Vue CLI v5.0.8
  50. ✨  Creating project in /Users/appleuser/Desktop/aa-aa.
  51. 声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/680723
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。