前端——在当地搭建Vue单页应用

目次
1、安装最新node.js
2、打开命令行窗口
3、进入要保存项目标目次下
4、安装 Vue CLI
5、创建新项目，选择功能
5.1 新建项目
5.2 Please pick a preset
5.3 Check the features needed for your project
5.4 Choose a version of Vue.js
5.5 Use history mode for router?
5.6 Pick a linter/formatter config
5.7 Save this as a preset for future projects?
5.8 Lint on save
5.9 In package.json
6、使用webstorm打开创建好的项目，进行编写
7、启动开发服务器
8、将应用发布到生产环境
9、Vue项目结构

---

1、安装最新node.js

2、打开命令行窗口

   

• 快捷键：windows+R，输入“cmd”，打开命令行窗口
  
• 
  
  

  3、进入要保存项目标目次下

   

  4、安装 Vue CLI

   

• Vue CLI 是一个官方提供的工具，用于快速搭建和管理 Vue 项目
  
• 此命令执行一次就行了，不必每次创建新项目时都执行一次
  
  
  
  • 1. npm install -g @vue/cli

    复制代码
  
  
•  检查是否安装成功
  
  
  
  • 
    
    
  
  

  5、创建新项目，选择功能

5.1 新建项目

   

• 
  
  
• 1. vue create <project-name>

  复制代码

  5.2 Please pick a preset

   

• 
  
  
• 创建 Vue 3 项目，而且希望使用默认设置，选择 Default ([Vue 3] babel, eslint)。
  
• 创建 Vue 2 项目，则选择 Default ([Vue 2] babel, eslint)。
  
• 自定义设置，则选择 Manually select features，然后按照提示逐步选择所需的功能和工具。
  

  5.3 Check the features needed for your project

   

• 
  
  
• 选项功能：
  
  
  
  • (*) Babel: 使用 Babel 来转译 JavaScript 代码，以确保你可以使用最新的 JavaScript 特性，并兼容不同的欣赏器。
    
  • ( ) TypeScript: 是否使用 TypeScript 作为项目标编程语言。TypeScript 是 JavaScript 的一个超集，添加了静态类型检查的功能。
    
  • ( ) Progressive Web App (PWA) Support: 是否启用渐进式 Web 应用（PWA）的支持，这答应你将网站变革为一个可离线访问的应用。
    
  • ( ) Router: 是否使用 Vue Router 来实现单页面应用（SPA）的路由功能，用于页面之间的导航。
    
  • ( ) Vuex: 是否使用 Vuex 来管理应用的状态，特别是对于较大型的 Vue 应用步伐。
    
  • ( ) CSS Pre-processors: 是否必要支持 CSS 预处置惩罚器，如 Sass 或 Less，来加强 CSS 的编写和管理本领。
    
  • (*) Linter / Formatter: 是否启用代码规范检查和格式化工具，如 ESLint。这有助于保持代码风格的划一性，并捕获一些常见的代码错误。
    
  • ( ) Unit Testing: 是否必要单元测试框架，用于测试应用步伐中的各个单元（组件、函数等）。
    
  • ( ) E2E Testing: 是否必要端到端（E2E）测试框架，用于模拟用户在应用步伐中的现实操纵和场景。
    
  
  
• 怎样选择：
  
  
  
  • 使用空格键选择你必要的功能。
    
  • 使用 a 键来全选全部功能。
    
  • 使用 i 键来反转选择，即未选择的变为选择，已选择的变为未选择。
    
  • 按下回车键（Enter）确认你的选择并继承设置下一步。
    
  
  
• 多数环境下，至少应该选择 Babel 和 Linter / Formatter 来确保项目标基本质量和跨欣赏器兼容性。其余的选择则根据项目标规模、复杂性和开发团队的技术栈来决定。
  

  5.4 Choose a version of Vue.js

   

• 
  
  
• 选择vue3，最新版本
  

  5.5 Use history mode for router?

   

• 
  
  
• 是否使用汗青模式（history mode）来管理路由？（在生产环境中必要正确设置服务器以支持索引回退）
  汗青模式（history mode） 和 哈希模式（hash mode） 是 Vue Router 提供的两种不同的路由模式：
  
• 哈希模式：
  
  
  
  • 默认模式，使用 URL 的 hash（#）来模拟一个完备的 URL，例如 http://example.com/#/about。
    
  • 不必要特别的服务器设置，可以直接在全部服务器环境中使用。
    
  
  
• 汗青模式：
  
  
  
  • 使用 HTML5 History API 来管理路由，URL 看起来像正常的 URL，例如 http://example.com/about。
    
  • 这种模式在视觉上更加清晰，但是在生产环境中必要服务器的支持。详细来说，必要服务器设置来确保当用户刷新页面或直接访问某个 URL 时，服务器能够正确地回退到你的应用的入口点（通常是 index.html 文件），而不是返回 404 错误。
    
  
  
• 服务器设置：
  
• 当你使用汗青模式时，服务器必要设置，以确保在任何路由路径下刷新页面时，能够正确地加载你的单页面应用（SPA）。这通常涉及设置服务器以将全部路径都重定向到你的入口文件（例如 index.html），然后让前端路由接管处置惩罚页面的加载和路由切换。
  

  5.6 Pick a linter/formatter config

   

• 
  
  
• 这些选项是关于代码规范检查和格式化工具 ESLint 的不同设置选项
  
• ESLint with error prevention only:
  
  
  
  • 这个选项只会设置 ESLint 来检测并阻止大概导致错误的代码模式，但不会强制同一的代码风格或格式。
    
  • 适用场景：得当对代码风格没有特别要求，但希望确保代码质量和错误检测的项目。
    
  
  
• ESLint + Airbnb config:
  
  
  
  • 使用 Airbnb 公司开发的 JavaScript 代码风格和最佳实践设置。Airbnb 的设置非常严酷，包括了很多规则和约定，旨在提高代码质量和可维护性。
    
  • 适用场景：得当大多数项目，特别是团队较大大概想要使用盛行的标准化设置来确保代码质量和划一性的项目。
    
  
  
• ESLint + Standard config:
  
  
  
  • 使用 Standard 设置，这也是另一种盛行的 JavaScript 代码风格和规范。Standard 风格比 Airbnb 更加简洁，通常更容易上手。
    
  • 适用场景：得当希望使用简单、直接的代码风格和规范的项目。
    
  
  
• ESLint + Prettier:
  
  
  
  • 这个选项会合成 ESLint 和 Prettier。ESLint 负责代码质量和错误检查，而 Prettier 负责代码的格式化。
    
  • 适用场景：得当希望代码风格和格式化都能得到管理的项目。Prettier 提供了强大的主动格式化功能，能够保持整个团队的代码风格划一。
    
  
  

  5.7 Save this as a preset for future projects?


   

• 
  
  
• 是否要保存为这个项目作为一个模板保存？
  

  5.8 Lint on save


   

• 
  
  
• 
  
  

  5.9 In package.json

   

• 
  
  
• 
  
  

  创建成功

6、使用webstorm打开创建好的项目，进行编写

   常用命令行命令：
  

• 项目标设置：npm install
  
• 编译和热重载用于开发环境：npm run serve
  
• 编译和压缩用于生产环境：npm run build
  
• 整理和修复文件：npm run lint
  

  

7、启动开发服务器

   

• 如果在 package.json 的 scripts 中，脚本依赖于某些模块大概工具，那么在第一次运行大概更新依赖后，确实必要运行 npm install 来确保依赖的包已经安装到当地的 node_modules 目次中。
  
• 当你已经安装了全部依赖，而且没有新增或更新依赖时，通常直接运行 npm run serve 就可以启动开发环境了，由于依赖已经存在于当地的 node_modules 中。
  

1. npm run serve

复制代码

访问网址：http://127.0.0.1:5173/index

8、将应用发布到生产环境

   

• 当你运行 npm run build 时，Vue CLI 会启动其构建服务，根据你项目中的设置（如 vue.config.js 文件）来进行构建，生成最终的构建文件供部署使用。
  
• 此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。 把dist文件夹的东西复制粘贴到后端项目标resources/static目次下，连接前后端……（此处涉及到前后端分离的知识，另说）
  

1. npm run build

复制代码

 

9、Vue项目结构

1. my-vue-app/
2. ├── node_modules              # 项目的所有依赖包
3. ├── public/                  # 静态资源目录
4. │   ├── index.html           # 入口 HTML 文件
5. │   └── ...
6. ├── src/                     # 源代码目录
7. │   ├── assets/              # 静态资源如图片、字体等
8. │   ├── components/          # Vue 组件
9. │   ├── views/               # 页面视图组件
10. │   ├── router/              # 路由配置
11. │   ├── store/               # Vuex 状态管理
12. │   ├── services/            # 后端 API 服务
13. │   ├── styles/              # 全局样式
14. │   ├── utils/               # 工具函数
15. │   ├── App.vue              # 根组件
16. │   └── main.js              # 入口 JS 文件
17. ├── tests/                   # 测试文件目录
18. ├── .eslintrc.js             # ESLint 配置文件
19. ├── .babelrc                 # Babel 配置文件
20. ├── .gitignore               # 指定了 Git 在版本控制中忽略的文件和目录
21. ├── babel.config.js          # 编译器Babel的配置
22. ├── package.json             # npm 包管理文件
23. ├── README.md                # 项目说明文件
24. ├── vue.config.js            # 自定义 Vue CLI 的配置

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。