标签：Vue 规范 js vue 组件 import 9.0 属性

【一】vue-cli创建项目

【1】引入

单页面应用（SPA）

单页面应用（Single Page Application，简称SPA）是一种Web应用程序的架构方式。
- 传统的多页面应用中，每次导航到新页面都会进行整个页面的重新加载。
- 而SPA只有一个主页面（通常是index.html），页面的内容通过动态渲染来更新，不会重新加载整个页面。
在使用Vue开发SPA时，我们通常只需要一个HTML文件（如xx.html）作为主页面
- 所有的页面内容都是通过Vue的组件来进行切换和更新。

单文件组件

单文件组件是Vue官方推荐的一种组织代码的方式。
通常情况下，一个组件会包含三个部分：HTML内容、CSS内容和JavaScript逻辑。
- HTML内容：
  - 我们将HTML代码放在一个<template>标签中，用来定义组件的布局和结构。
- CSS内容：
  - 我们将CSS代码放在一个<style>标签中，用来定义组件的样式。
- JavaScript内容：
  - 我们将JavaScript代码放在一个<script>标签中，用来定义组件的逻辑和行为。
使用单文件组件的好处是，可以更好地组织和管理代码，将相关的代码放在一个文件中，提高可读性和开发效率。

Vue脚手架（Vue CLI）

Vue脚手架（Vue CLI）是由Vue官方提供的一个工具，用于快速创建Vue项目并提供开箱即用的基础代码。
- 通过使用Vue脚手架，我们可以轻松创建出一个完整的Vue项目结构，包括配置文件、目录结构和示例代码。
类似于Django的django-admin命令用于创建Django项目，Vue脚手架通过一些简单的命令行操作，帮助我们快速生成Vue项目的初始代码，同时也提供了一系列的开发工具和便捷的开发环境。
总结来说，SPA、单文件组件和Vue脚手架是Vue开发中常用的概念和工具，它们能够帮助我们更好地组织和开发Vue应用程序。

【2】Vue CLI脚手架介绍

Vue CLI是一个官方提供的用于快速搭建Vue项目的脚手架工具。
- 它简化了Vue项目的配置和构建过程，提供了一系列的命令行工具，帮助开发者更高效地创建、管理和构建Vue应用程序。
在Vue 2中，使用Vue CLI是创建Vue项目的标准方式。
- 而在Vue 3中，除了Vue CLI，还可以使用Vite作为新一代的构建工具来创建Vue项目。

1. 快速创建项目

Vue CLI提供了快速创建Vue项目的命令，只需简单几步就能初始化一个基本的Vue项目结构，包括配置文件、目录结构和示例代码。

2. 丰富的插件生态系统

Vue CLI支持插件机制，用户可以根据项目需求选择性地安装和配置插件，以扩展Vue项目的功能。

3. 集成的开发服务器

Vue CLI内置了一个开发服务器，支持热重载(Hot Reload)特性，能够在开发阶段实时预览修改后的效果，提高开发效率。

4. 自动化构建和打包

Vue CLI集成了Webpack，提供了自动化构建和打包的功能。开发者可以使用预设的构建配置，也可以根据需求进行自定义配置。
同时，Vue CLI还支持代码分割、资源压缩等优化功能，生成最优化的生产环境代码。

5. 配置灵活、可扩展性强

Vue CLI的配置文件可用于更细粒度地控制项目的行为和打包过程。用户可以对各个环节做定制化配置，以满足项目的特殊需求。
总而言之，Vue CLI是一个能够提升开发效率、简化项目配置和构建过程的强大工具，广泛应用于Vue开发的各个阶段。

【二】安装Node.js和Vue CLI

（1）下载和安装Node.js

Vue CLI是一个基于Node.js运行的软件，因此需要先安装Node.js。
- 下载地址：https://nodejs.org/en/download/
- 下载完成后，运行安装程序，并按照提示一路点击"Next"进行安装。
- 在安装过程中，可以选择安装位置，并勾选"Automatically install the necessary tools for Node.js"，以确保在安装过程中自动安装所需的工具。
- 安装完成后，在命令行中输入以下命令，检查Node.js是否安装成功：
  - node -v
- 如果成功安装，会显示Node.js的版本号。

（2）安装Vue CLI

安装完成Node.js后，需要使用npm安装Vue CLI。
- 打开命令行窗口（Windows用户可以打开"命令提示符"或"PowerShell"），输入以下命令来安装Vue CLI：
  - npm install -g @vue/cli
- 这会在全局环境下安装Vue CLI，允许您在任何地方使用该命令。

（3）镜像替换（可选）

npm默认下载第三方模块的速度可能较慢，但是您可以使用淘宝的镜像站点加速下载过程。
- 在命令行中输入以下命令，用cnpm替代npm：
  - npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安装完成后，以后使用npm安装模块的命令可以替换为cnpm。

（4）创建Vue项目

使用Vue CLI创建新的Vue项目非常简单。
- 打开命令行窗口，并进入您想要创建项目的目录。
- 输入以下命令，用Vue CLI创建项目：
  - vue create 项目名
- 例如，如果您想要创建一个名为"myfirstvue"的项目，可以输入以下命令：
  - vue create myfirstvue
- 创建项目时，Vue CLI会提示您选择包含预设配置的默认配置或手动选择配置。您可以根据需要进行选择。
- 创建过程可能需要一些时间，取决于网络和计算机性能。
- 创建完成后，您可以进入项目目录并开始开发Vue应用程序。

【三】Vue-cli创建项目

【1】命令行创建项目

vue create 项目名
vue create myfirstvue

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)       
  Default ([Vue 2] babel, eslint)       
  Manually select features

选择

Manually select features

Vue CLI v5.0.8
? 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, 
and <enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

选择Babel，Router，vuex
- Babel：语法转换
- Router：页面跳转路由效果
- vuex：状态管理器，存储数据的

选vue版本

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
   3.x
>  2.x

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

选package.json

装的第三方模块，都放在这个文件中，类似于Python中的requirements.txt

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Where do you prefer placing config for Babel, ESLint, etc.? 
  In dedicated config files
> In package.json

之前的设置，保存与不保存都可以

如果将配置保存，下次可以直接使用这个配置

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: normal

等待即可

Vue CLI v5.0.8
✨  Creating project in E:\Old Boy\vue_project\myfirstvue.

标签：Vue,规范,js,vue,组件,import,9.0,属性	

From： https://www.cnblogs.com/dream-ze/p/17610266.html

【9.0】Vue之项目规范

【一】vue-cli创建项目

【1】引入

单页面应用（SPA）

单文件组件

Vue脚手架（Vue CLI）

【2】Vue CLI脚手架介绍

1. 快速创建项目

2. 丰富的插件生态系统

3. 集成的开发服务器

4. 自动化构建和打包

5. 配置灵活、可扩展性强

【二】安装Node.js和Vue CLI

（1）下载和安装Node.js

（2）安装Vue CLI

（3）镜像替换（可选）

（4）创建Vue项目

【三】Vue-cli创建项目

【1】命令行创建项目

相关文章

赞助商

阅读排行