当前位置：网站首页 > Vue.js开发 > 正文

Vue安装脚手架（vue安装脚手架3.0用管理员）

Vue.js开发 来源： 网络 编辑：小编 更新时间：2024-12-17 22:27:10 浏览量：17



使用vueCli 安装预设的vuex+ts+less+router

 

 按方向键 ↓，选择Manually select features，enter
 

手动配置：是我们所需要的面向生产的项目，提供可选功能的 npm 包
 

 

手动配置，根据你需要用方向键选择（按 “空格键”选择/取消选择，A键全选/取消全选，i反选）对应功能
 

     
 
  1. ? Check the features needed for your project: (Press to select, to toggle all,  to invert selection)
    2.  
 
  2.  
  
     
  
    ( ) TypeScript // JavaScript的一个超集（添加了可选的静态类型和基于类的面向对象编程：类型批注和编译时类型检查、类、接口、模块、lambda 函数）
    3.  
 
  3. ( ) Progressive Web App (PWA) Support // 渐进式Web应用程序
    4.  
 
  4. () Router // vue-router（vue路由）
    5.  
 
  5. () Vuex // vuex（vue的状态管理模式）
    6.  
 
  6. () CSS Pre-processors // CSS 预处理器（如：less、sass）
    7.  
 
  7. () Linter / Formatter // 代码风格检查和格式化（如：ESlint）
    8.  
 
  8. () Unit Testing // 单元测试（unit tests）
    9.  
 
  9. () E2E Testing // e2e（end to end） 测试
    10.  

 

我们选择如下
 

 

确认enter后，需要选择vue版本，选择3.x的版本然后继续确认
 

 

然后如下配置
 

是否使用class风格的组件语法：Use class-style component syntax?输入N
 

 

Vue CLI v4.5.15
 

 
 
? Please pick a preset: Manually select features
 
 
//检查项目所需的功能：选择 Vue 版本、Babel、TS、Router、Vuex、CSS 预处理器
 
 
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors
 
 
//选择你想用 3.x 启动项目的 Vue.js 版本
 
 
? Choose a version of Vue.js that you want to start the project with 3.x
 
 
//是否使用class风格的组件语法
 
 
? Use class-style component syntax? No
 
 
//将 Babel 与 TypeScript 一起使用（现代模式、自动检测的 polyfill、转译 JSX 需要）
 
 
? 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) No
 
 
//选择一个 CSS 预处理器（默认支持 PostCSS、Autoprefixer 和 CSS 模块）：Less
 
 
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
 
 
//你更喜欢将 Babel、ESLint 等的配置放在哪里？ 在专用配置文件中
 
 
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
 
 
//将此保存为未来项目的预设？(是/否)
 
 
? Save this as a preset for future projects? (y/N) N
 

 

至此，配置完毕，桌面会出现一个vue3_cli_ts_htgl文件夹
 

 

 

使用 Vue Router 4 来创建一个基于 Vue 3 应用的路由配置
 

 

下面的代码展示了如何使用 Vuex 4 创建一个简单的 Vuex store。Vuex 是 Vue.js 的官方状态管理库，适用于中大型单页面应用，通过集中式的存储管理应用的所有组件的状态。
 

 

state: 用于存储应用的全局状态。
 

mutations: 定义更改状态的同步方法：mutations 是一个对象，其中包含多个函数，用于更改 state 中的数据。
 

     
 
  • Mutation 必须是同步函数，因为它们直接更改状态。
    •  

 

actions: 定义包含业务逻辑的异步方法：
 

     
 
  • actions 是一个对象，其中包含多个函数，用于执行异步操作或提交 mutation。
    •  
 
  • Action 函数接收一个包含 commit 方法的 context 对象，以及其他参数。
    •  
 
  • Actions 通常用于处理异步任务，然后通过 commit 方法调用 mutation 来更改状态。
    •  

 

modules: 用于将 store 分割成模块。
 

     
 
  • modules 是一个对象，可以包含多个子模块，每个子模块具有自己的 state、mutations、actions 和 modules。
    •  

 

 

 

 

shims-vue.d.ts 文件在 TypeScript 项目中有重要作用,这个文件用于告诉 TypeScript 如何处理 .vue 文件，从而避免类型错误。
 

     
 
  • eslint-disable用于禁用 ESLint 检查。因为这个文件主要是用来提供类型声明的，通常不需要进行代码风格检查。
    •  

 

     
 
  • declare module '*.vue':告诉 TypeScript，任何以 .vue 结尾的文件都应该被视为一个模块。这是一个模块声明，它使TypeScript 能够处理 .vue 文件。
    •  
 
  • import type { DefineComponent } from 'vue':从 vue 包中导入 DefineComponent 类型。这是 Vue 3 的一个内置类型，用于定义一个 Vue 组件。
    •  
 
  • const component: DefineComponent<{}, {}, any>:这里定义了一个常量 component，它的类型是 DefineComponent<{}, {}, any>。这意味着这个组件没有严格定义的 props、data 或者 methods 类型。
    •  

 

为什么需要这个文件？
 

     
 
  1. 类型安全:
    2.  

 

     
 
  •  
  
       
   
    • 提供 .vue 文件的类型定义，使 TypeScript 能正确识别和处理这些文件。
      •  
   
    • 增加类型安全，减少运行时错误。
      •  
  
    •  

 

     
 
  1. 开发者体验:
    2.  

 

     
 
  •  
  
       
   
    • 提供更好的开发者体验，如自动补全和类型检查。
      •  
  
    •  

 

示例
 

假设你有一个简单的 Vue 组件 HelloWorld.vue：
 

 

在没有 shims-vue.d.ts 文件的情况下，TypeScript 可能会报错，因为它不知道如何处理 .vue 文件。有了这个文件后，TypeScript 知道 .vue 文件是一个 DefineComponent，从而能够正确处理它们。
 

 

.browserslistrc文件的主要作用是配置项目的目标浏览器和Node.js版本范围，用于确定项目需要兼容的浏览器版本。
 

     
 
  1. 指定浏览器支持范围：.browserslistrc文件允许开发者明确列出项目需要支持的浏览器及其版本。这有助于确保前端代码在各种浏览器上都能正确运行，并提供良好的用户体验。
    2.  
 
  2. 兼容性处理：该文件中的配置信息会被一些前端工具（如Babel、Autoprefixer等）读取。这些工具会根据指定的浏览器范围，对代码进行相应的编译或处理，以确保代码在目标浏览器上的兼容性。
    3.  
 
  3. 配置参数解释： 
  
       
   
    • last 2 versions：表示支持所有浏览器的最后两个版本。
      •  
   
    •  
    
       
    
      1%：表示支持全球市场份额超过1%的浏览器。
      •  
   
    • not ie <= 8：表示不支持IE浏览器版本8及以下的版本。
      •  
   
    • not dead：表示不支持已经停止维护或不再使用的浏览器。
      •  
  
    4.  

 

 

babel.config.js 文件在 Babel 中起着配置 Babel 转换规则的关键作用。Babel 是一个广泛使用的 JavaScript 编译器，可以将现代（ES6+）的 JavaScript 代码转换为向后兼容的旧版本 JavaScript，以便在旧浏览器或环境中运行。
 

 

tsconfig.json详解
 

 

tsconfig.json 是 TypeScript 项目的一个核心配置文件，它用于指定编译 TypeScript 代码时所需的选项和设置。
 

常用配置选项
 

     
 
  1. compilerOptions 
  
       
   
    • target：指定编译后的 JavaScript 代码应该符合的 ECMAScript 标准版本。如 "es5", "es2015", "esnext" 等。 
    
         
     
      • module：指定生成的模块化代码的模块系统。如 "commonjs", "amd", "es6", "umd" 等。
        •  
     
      • outDir：指定编译后的 JavaScript 文件输出目录。
        •  
     
      • strict：启用严格的类型检查。
        •  
     
      • baseUrl：用于解析非相对模块名称的基本目录。
        •  
     
      • paths：指定模块的路径映射，用于模块解析。
        •  
     
      • allowJs：允许编译 JavaScript 文件。
        •  
     
      • sourceMap：是否生成 source map 文件，用于调试。
        •  
     
      • ...（其他编译选项，如 noImplicitAny, jsx, lib 等）
        •  
    
      •  
  
    2.  
 
  2. include 
  
       
   
    • 指定需要编译的文件路径或文件夹路径的 glob 模式。例如，"src/*/" 表示编译 src 目录下所有文件。
      •  
  
    3.  
 
  3. exclude 
  
       
   
    • 指定不需要编译的文件路径或文件夹路径的 glob 模式。例如，"node_modules" 和 "*/.spec.ts" 分别表示排除 node_modules 目录和所有 .spec.ts 文件。
      •  
  
    4.  
 
  4. files
    5.  

 

     
 
  • 明确指定需要编译的文件列表。当使用 include 和 exclude 时，这个选项通常不需要。
    •  

 

     
 
  1. extends 
  
       
   
    • 指定继承自另一个 tsconfig.json 文件，允许配置文件之间的继承。
      •  
  
    2.  
 
  2. compileOnSave（已弃用） 
  
       
   
    • 指定是否在保存文件时自动编译。注意，这个选项在较新的 TypeScript 版本中已被弃用。
      •  
  
    3.  
 
  3. references
    4.  

 

     
 
  • 使用项目引用，可以将一个项目作为另一个项目的依赖。
    •  

 

     
 
  1. angularCompilerOptions 
  
       
   
    • 针对 Angular 项目的特殊编译器选项。
      •  
  
    2.  

到此这篇Vue安装脚手架（vue安装脚手架3.0用管理员）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！
                            


                            

                                
  • 
                                    
                                    上一篇：
                                    
                                    vue安装使用（vue的安装和使用）
                                    
                                    
                                
    • 
                                
  • 
                                    
                                    下一篇：
                                    
                                    map转json数组（map转成json字符串）
                                    
                                    
                                
    • 
                            
    

                            
                            
    
                                
    
                                    版权声明：
                                    
    
                                        
                                        本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
                                        
                                        
    
                                         
                                        如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
                                        
                                    

    
                                    
    转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/33084.html
    
                                
    
                            
    
                            
                        
    
                        
    
                            
    
                                
                                
                                
                                    # 安装
                                
                                
                                    # Vue
                                
                                
                            
    
                        
    

                        
                        
                        
    
                            
    相关文章：
    
                        
                        
  • 
                                vue安装使用（vue的安装和使用）2024-12-17 22:27:10
                        
    • 
                        
                        
  • 
                                我的世界加快时间的指令（我的世界加快时间指令1.7.10）2024-12-17 22:27:10
                        
    • 
                        
                        
  • 
                                vue2与vue3哪个用的多（vue3和2区别）2024-12-17 22:27:10
                        
    • 
                        
                        
  • 
                                js深拷贝和浅拷贝的使用场景（js深拷贝和浅拷贝的使用场景一样吗）2024-12-17 22:27:10
                        
    • 
                        
                        
  • 
                                ubuntu安装cmake-gui（ubuntu安装cmake3.12）2024-12-17 22:27:10
                        
    • 
                        
                        
  • 
                                map转json数组（map转成json字符串）2024-12-17 22:27:10
                        
    • 
                        
                        
  • 
                                nvme接口引脚定义（nvme2.0接口）2024-12-17 22:27:10
                        
    • 
                        
                        
  • 
                                k8s版本升级 二进制 1.15 到1.19（k8s1.20二进制部署）2024-12-17 22:27:10
                        
    • 
                        
                        
  • 
                                vmware6.0密钥（vmware密钥有什么用）2024-12-17 22:27:10
                        
    • 
                        
                        
  • 
                                pcie5（pcie5.0固态硬盘什么时候出）2024-12-17 22:27:10
                        
    • 
                        
                        
    
                        
                    
    
                
    
            
    
        
    
        
    
    

    


    
    ❮
    全屏图片
    ❯