vue-cli初始化项目的操作步骤说明

105 阅读1分钟

一、vue/cli 安装

1.使用npm install -g @vue/cli 全局安装vue
2.使用vue -V查看当前版本号

二、vue create创建项目

1、输入命令vue create 项目名字

image.png 备注:

  • Default ([Vue 2] bable,eslit):默认选择Vue2及相关配置
  • Default (Vue 3 Preview) ([Vue 3] bable,eslit):默认选择vue3及相关配置
  • Manually Select features:自定义选择

2、自定义选择——相关配置选择

image.png 备注:

  • Choose Vue version:Vue版本选择
  • Babel:Es6转Es5
  • TypeScript:Ts语法
  • Progressive Web App (PWA) Support:支持渐进式的网页应用程序(www.5axxw.com/questions/c…
  • Router:路由;
  • Vuex:数据存储;
  • CSS Pre-processors:CSS预处理;
  • Unit Testing:单元测试;
  • E2E Testing:端到端测试。

image.png 备注:路由器是否使用历史模式

  • Hash:支持所有现代浏览器,包括旧版浏览器。因为哈希符号(#)后的内容不会发送到服务器,所以不会触发页面刷新(example.com/#/home);
  • History:需要浏览器支持 HTML5 的 History API,因此在较旧的浏览器中可能不被支持。当用户切换路由时,会向服务器发送请求,可能触发页面刷新。(example.com/home)

image.png 备注:

  • Sass/SCSS (with dart-sass):保存后生效;
  • Sass/SCSS (with node-sass):自动实时编译。

image.png 备注

  • ESLint with error prevention only:进行报错提醒;
  • ESLint + Airbnb config:遵循 Airbnb 的js代码规范(严格,适合大型项目或团队);
  • ESLint + Standard config:遵循 Standard 的js代码规范(相对宽松,适合快速原型开发或个人项目);
  • ESLint + Prettier:使用 ESLint 来检查代码质量,并使用 Prettier 来格式化代码。