Vue-7.命令创建Vue项目

傷城~ 2024-03-23 23:15 18阅读 0赞

### 常用命令 ###

以下是 npm 和 Yarn 的常用命令：

**npm 命令：**

1.  安装依赖包：
    
        npm install
2.  全局安装包：
    
        npm install -g package-name
3.  安装特定版本的包：
    
        npm install package-name@version
4.  安装开发依赖包：
    
        npm install --save-dev package-name
5.  卸载包：
    
        npm uninstall package-name
6.  运行脚本命令：
    
        npm run script-name
7.  查看安装的包信息：
    
        npm list
8.  更新包：
    
        npm update package-name
9.  清除缓存：
    
        npm cache clean

**Yarn 命令：**

1.  安装依赖包：
    
        yarn
2.  全局安装包：
    
        yarn global add package-name
3.  安装特定版本的包：
    
        yarn add package-name@version
4.  安装开发依赖包：
    
        yarn add --dev package-name
5.  卸载包：
    
        yarn remove package-name
6.  运行脚本命令：
    
        yarn run script-name
7.  查看安装的包信息：
    
        yarn list
8.  更新包：
    
        yarn upgrade package-name
9.  清除缓存：
    
        yarn cache clean

这些是 npm 和 Yarn 中的一些常用命令，您可以根据项目的需要和具体情况使用这些命令来管理依赖包、运行脚本等。

### `使用预设默认配置创建Vue项目` ###

创建一个简单的 Vue 项目需要使用 Vue CLI（命令行界面）。Vue CLI 是一个用于快速构建 Vue.js 项目的工具，它可以帮助你设置项目的基本结构、配置以及开发环境。

以下是创建一个简单的 Vue 项目的步骤：

#### 1. **安装 Node.js** ####

Vue CLI 需要 Node.js 环境。如果你还没有安装 Node.js，请前往 [Node.js 官网][Node.js] 下载并安装合适的版本。

#### 2. **安装 Vue CLI** ####

打开终端（命令行界面）并运行以下命令来全局安装 Vue CLI：

npm install -g @vue/cli

#### 3. **创建新项目** ####

运行以下命令来创建一个新的 Vue 项目。在这里，我们使用 “my-vue-app” 作为项目名称，你可以将其替换为你自己的项目名称。

vue create my-vue-app

my-vue-project/
    ├── node_modules/            # 依赖
    ├── public/                  # 公共静态资源目录
    │   ├── index.html           # 应用程序的入口 HTML 文件
    │   └── favicon.ico          # 网站的图标文件
    ├── src/                     # 项目源代码目录
    │   ├── assets/              # 静态资源
    │   │   ├── logo.png         # 示例图像文件
    │   ├── components/          # Vue 组件目录
    │   │   ├── HelloWorld.vue   # 示例组件
    │   ├── App.vue              # 根组件，应用的布局和全局样式
    │   └── main.js              # 入口文件，创建 Vue 实例和配置
    ├── .gitignore               # Git 忽略文件配置
    ├── babel.config.js          # Babel 配置文件
    ├── jsconfig.json            # JavaScript 项目配置文件
    ├── package.json             # 项目配置和依赖
    ├── package-lock.json        # 依赖版本锁定文件
    ├── README.md                # 项目说明文档
    ├── vue.config.js            # Vue CLI 配置文件

#### 4. **进入项目目录** ####

创建项目后，使用以下命令进入项目目录：

cd my-vue-app

#### 5. **运行开发服务器** ####

使用以下命令在开发模式下运行项目：

npm run serve

运行后，你将在终端看到一个 URL（通常是 `http://localhost:8080/` 或类似的地址）。在浏览器中打开该地址，你将看到一个简单的 Vue 应用程序。

这样，你就成功创建了一个简单的 Vue 项目。你可以在项目的 `src` 文件夹中找到主要的源代码文件，其中的 `App.vue` 是根组件，`main.js` 是项目的入口文件。

随后，你可以通过编辑 `App.vue` 和其他组件，添加更多功能和页面来进一步开发你的 Vue 项目。

### `使用预设手动配置创建Vue项目（推荐）` ###

使用预设手动配置创建 Vue 项目意味着你可以在选择预设的基础上，根据你的需求进行一些自定义设置。以下是使用预设手动配置创建 Vue 项目的步骤：

#### 1. **安装 Node.js** ####

如果你还没有安装 Node.js，请前往 [Node.js 官网][Node.js] 下载并安装合适的版本。

#### 2. **安装 Vue CLI** ####

打开终端并运行以下命令来全局安装 Vue CLI：

npm install -g @vue/cli

#### 3. **创建新项目** ####

运行以下命令来创建一个新的 Vue 项目。在这里，我们使用 “my-vue-app” 作为项目名称，你可以将其替换为你自己的项目名称。

cd C:\Users\Administrator\IdeaProjects
    vue create my-vue-app

#### 4. **选择预设配置** ####

运行上述命令后，Vue CLI 将提示你选择一个预设配置。选择一个预设配置，例如 “Default (\[Vue 2\] babel, eslint)”。

*  ![在这里插入图片描述][7e7d3c24b3bb41caa14a46b97b2a29f3.png]

#### 5. **手动配置** ####

在选择预设配置后，Vue CLI 将为你生成一个初始项目结构。然后，你可以进入项目目录，编辑不同的配置文件以及其他代码文件，进行手动配置和定制。

--------------------

*  ![在这里插入图片描述][ce2040ae828b4fed94ca4304ed177df0.png]

--------------------

*  `当使用 "Manually select features" 模式创建 Vue 项目时，你将可以选择是否启用特定的特性。以下是一份表格，展示了在手动选择特性模式下可能的选项及其描述：`  
    ![在这里插入图片描述][00e815f70fee42c8b796a60945ba3820.png]

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Babel</td> 
   <td>使用 Babel 编译器将新版 JavaScript 转换为向后兼容的版本，以确保在不同浏览器中兼容。</td> 
  </tr> 
  <tr> 
   <td>TypeScript</td> 
   <td>启用 TypeScript 支持，这是 JavaScript 的超集，添加了类型系统支持。</td> 
  </tr> 
  <tr> 
   <td>Progressive Web App (PWA) Support</td> 
   <td>启用渐进式 Web 应用（PWA）的支持，提供更好的离线访问和用户体验。</td> 
  </tr> 
  <tr> 
   <td>Router</td> 
   <td>启用 Vue Router，官方的 Vue.js 路由管理器，用于构建单页面应用的路由系统。</td> 
  </tr> 
  <tr> 
   <td>Vuex</td> 
   <td>启用 Vuex，官方的 Vue.js 状态管理库，用于管理应用的状态。</td> 
  </tr> 
  <tr> 
   <td>CSS Pre-processors</td> 
   <td>启用 CSS 预处理器，如 Sass、Less 或 Stylus，以使用更强大的 CSS 功能。</td> 
  </tr> 
  <tr> 
   <td>Linter / Formatter</td> 
   <td>启用代码风格检查和自动格式化工具，以帮助保持一致的代码质量和风格。</td> 
  </tr> 
  <tr> 
   <td>Unit Testing</td> 
   <td>启用单元测试支持，可以选择使用测试框架如 Mocha 或 Jest。</td> 
  </tr> 
  <tr> 
   <td>E2E Testing</td> 
   <td>启用端到端（End-to-End，E2E）测试支持，可以选择使用测试框架如 Nightwatch 或 Cypress。</td> 
  </tr> 
 </tbody> 
</table>

`这些选项可以根据你的项目需求来进行选择和定制。每个选项都提供了不同的功能和工具，可以根据你的开发需要选择启用或禁用。根据你的选择，Vue CLI 将会为你生成适合你项目特性的配置文件和结构。`

--------------------

*  `这里我不使用TypeScript,其他的都用`  
    ![在这里插入图片描述][6bb22eda42824ed58fc878de39f5d404.png]

--------------------

*  `选择Vue.js-3.x`  
    ![在这里插入图片描述][94e08aab16ca40488191f40f44d960e8.png]

--------------------

*  `选择路由中使用 history 模式`  
    ![在这里插入图片描述][548f9d88a94541bbaf4c2b5fcf537ac6.png]  
    `当在 Vue 项目创建过程中选择 "Use history mode for router"（在路由中使用 history 模式）选项时，以下是关于两种路由模式的比较：`

<table> 
 <thead> 
  <tr> 
   <th>特性</th> 
   <th>哈希模式（Hash Mode）</th> 
   <th>历史模式（History Mode）</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>URL 格式</td> 
   <td><code>example.com/#/about</code></td> 
   <td><code>example.com/about</code></td> 
  </tr> 
  <tr> 
   <td>适用场景</td> 
   <td>适用于单页应用，不需要服务器端配置。</td> 
   <td>适用于需要更干净 URL 且服务器配置良好的应用。</td> 
  </tr> 
  <tr> 
   <td>浏览器支持</td> 
   <td>所有浏览器都支持。</td> 
   <td>需要支持 HTML5 历史 API 的浏览器。</td> 
  </tr> 
  <tr> 
   <td>服务器配置</td> 
   <td>不需要额外的服务器配置，开箱即用。</td> 
   <td>需要适当的服务器配置来处理客户端路由。</td> 
  </tr> 
  <tr> 
   <td>URL 重写</td> 
   <td>不需要服务器重写配置。</td> 
   <td>需要配置服务器以避免直接访问 URL 时出现 404。</td> 
  </tr> 
  <tr> 
   <td>SEO</td> 
   <td>对搜索引擎优化不太友好，因为内容在哈希中。</td> 
   <td>对搜索引擎友好，URL 更清晰，内容更容易索引。</td> 
  </tr> 
  <tr> 
   <td>刷新页面</td> 
   <td>刷新页面时仍可正常加载应用。</td> 
   <td>需要服务器配置来确保刷新时正确加载应用。</td> 
  </tr> 
 </tbody> 
</table>

--------------------

*  `CSS pre-processor选择less`  
    当在 Vue 项目创建过程中选择 “CSS pre-processor”（CSS 预处理器）选项时，你可以根据需求选择是否使用以下预处理器来编写样式：

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>None</td> 
   <td>不使用任何 CSS 预处理器，直接编写原生 CSS。</td> 
  </tr> 
  <tr> 
   <td>Sass/SCSS</td> 
   <td>使用 Sass（Syntactically Awesome Style Sheets） 预处理器，提供了更丰富的功能，如变量、嵌套、混合等。Vue CLI 使用 SCSS 作为 Sass 的语法。</td> 
  </tr> 
  <tr> 
   <td>Less</td> 
   <td>使用 Less 预处理器，类似于 Sass，提供了类似的功能，如变量、嵌套、混合等。</td> 
  </tr> 
  <tr> 
   <td>Stylus</td> 
   <td>使用 Stylus 预处理器，提供了简洁的语法和强大的功能。</td> 
  </tr> 
 </tbody> 
</table>

选择适合的 CSS 预处理器取决于你的个人偏好和项目需求。使用预处理器可以让你更有效地管理和组织样式代码，并提供一些额外的功能，以提高样式开发的效率。

根据你的选择，Vue CLI 将会配置项目以支持所选的预处理器，并且在项目的组件中的 `<style>` 标签中编写预处理器的样式代码。这样，你就能够以更强大的方式编写和管理样式，从而提升项目的开发效率和可维护性。

--------------------

*  `linter / formatter config选择ESLint + Prettier`

当你在创建 Vue 项目时选择 “Linter / formatter config” 选项时，可以根据不同的配置选择，获得不同的代码风格检查和自动格式化设置。以下是这些配置的一个简单表格化概述：

<table> 
 <thead> 
  <tr> 
   <th>配置选项</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ESLint</td> 
   <td>使用 ESLint 进行代码风格检查和错误检测。你可以选择使用预设的规则或进行自定义配置。</td> 
  </tr> 
  <tr> 
   <td>Prettier</td> 
   <td>使用 Prettier 进行自动代码格式化，保持一致的缩进、引号、换行等。</td> 
  </tr> 
  <tr> 
   <td>ESLint + Prettier</td> 
   <td>结合 ESLint 和 Prettier，既检查代码风格又自动格式化，确保代码符合规范且格式一致。</td> 
  </tr> 
 </tbody> 
</table>

选择其中一个配置选项可以根据你的需求和偏好，帮助你维持一致的代码质量和风格，提高代码的可读性和可维护性，减少错误和风格不一致所带来的问题。根据你的选择，你还可以进一步调整和定制代码风格检查和自动格式化的规则。

--------------------

*  `additional lint features选择Lint on save`

以下是 “Additional lint features” 选项的表格化概述：

<table> 
 <thead> 
  <tr> 
   <th>附加功能</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Lint on save</td> 
   <td>在保存文件时自动运行代码风格检查。每次保存文件时，ESLint 会检查代码并显示警告或错误。</td> 
  </tr> 
  <tr> 
   <td>Lint and fix on commit</td> 
   <td>在每次提交代码时，自动运行代码风格检查并尝试自动修复可修复的问题。确保提交的代码规范。</td> 
  </tr> 
  <tr> 
   <td>Error prevention in manual mode</td> 
   <td>在手动编写代码时，实时检查代码风格并显示警告或错误，帮助避免常见的代码风格问题。</td> 
  </tr> 
 </tbody> 
</table>

选择这些附加功能可以增强你的代码质量和风格管理，以及减少在开发过程中可能出现的错误。根据项目需求和团队实践，你可以选择其中一个或多个附加功能来提高代码的一致性和可维护性。

--------------------

*  `unit testing选择jest`

以下是与 “Unit testing” 相关的表格化概述：

<table> 
 <thead> 
  <tr> 
   <th>概念</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>单元测试框架</td> 
   <td>在 Vue 项目中，你可以选择使用 Jest、Mocha 等测试框架来编写和运行单元测试。</td> 
  </tr> 
  <tr> 
   <td>断言库</td> 
   <td>断言库用于编写测试用例中的断言，以验证代码是否按预期工作。常见的库包括 Chai、Jest 断言等。</td> 
  </tr> 
  <tr> 
   <td>测试运行器</td> 
   <td>测试运行器收集和执行测试用例，通常与测试框架集成。在 Vue 项目中，你会使用测试框架的运行器。</td> 
  </tr> 
  <tr> 
   <td>测试文件</td> 
   <td>每个组件或模块通常都有对应的测试文件，其中包含测试用例，描述代码在不同情况下的行为和输出。</td> 
  </tr> 
  <tr> 
   <td>模拟</td> 
   <td>在单元测试中，你可能需要模拟依赖项，如 API 调用、外部库等。你可以使用 Sinon 等库来进行模拟。</td> 
  </tr> 
 </tbody> 
</table>

通过单元测试，你可以确保项目中的每个单元（组件、函数等）都能按照预期工作，减少潜在问题，并提高代码的质量和稳定性。在 Vue 项目中，Jest 是一个流行的选择，可以帮助你轻松地编写和运行单元测试。

--------------------

*  `E2E testing选择Cypress`

以下是与 “E2E testing” 相关的表格化概述：

<table> 
 <thead> 
  <tr> 
   <th>概念</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>E2E 测试框架</td> 
   <td>在 Vue 项目中，你可以选择使用 Cypress、Nightwatch 等 E2E 测试框架，模拟用户操作和验证应用程序。</td> 
  </tr> 
  <tr> 
   <td>模拟用户操作</td> 
   <td>在 E2E 测试中，你可以模拟用户在应用程序中的实际操作，如点击、输入、导航等。</td> 
  </tr> 
  <tr> 
   <td>验证用户交互</td> 
   <td>E2E 测试可以验证用户在应用程序中的交互，确保交互产生预期的结果。</td> 
  </tr> 
  <tr> 
   <td>应用程序流程</td> 
   <td>E2E 测试可以测试整个应用程序的流程，从登录到交互到退出等。</td> 
  </tr> 
  <tr> 
   <td>断言和期望</td> 
   <td>在 E2E 测试中，你可以使用断言来验证应用程序的行为是否符合预期，例如页面元素、数据、状态等。</td> 
  </tr> 
 </tbody> 
</table>

通过 E2E 测试，你可以全面地验证应用程序的功能、交互和流程，以确保用户能够正常使用应用并获得预期的结果。在 Vue 项目中，Cypress 是一个流行的 E2E 测试框架，它可以帮助你模拟用户操作并进行验证，从而确保应用程序在各种情况下都能正确运行。

--------------------

*  `配置文件我选择分开，而不是集中在package.json中`

--------------------

*  `最后我选择将此保存为未来项目的预设，下次进入我就不用一步步配置了`  
    ![在这里插入图片描述][11a35f1ac8774e59a26e7b9520335770.png]
    
    ![在这里插入图片描述][927a4915ec5d4db7926e5002ed0f27f6.png]

my-vue-project/                    
    ├── node_modules/                  
    ├── public/
    │   ├── index.html                 
    ├── src/
    │   ├── assets/                    
    │   ├── components/                
    │   ├── views/                     
    │   ├── App.vue                    
    │   ├── main.js                    
    ├── tests/
    │   ├── unit/                      
    │   │   ├── example.spec.js        
    │   ├── e2e/                       
    │   │   ├── specs/
    │   │   │   ├── test.spec.js       
    ├── .browserslistrc                
    ├── .gitignore                     
    ├── babel.config.js                
    ├── cypress.json                   
    ├── jest.config.js                 
    ├── jsconfig.json                  
    ├── package.json                   
    ├── package-lock.json              
    ├── README.md                      
    ├── vue.config.js                  
    ├── .eslintrc.js

#### 6. **进入项目目录** ####

创建项目后，使用以下命令进入项目目录：

cd my-vue-app

#### 7. **运行开发服务器** ####

使用以下命令在开发模式下运行项目：

npm run serve

运行后，你将在终端看到一个 URL（通常是 `http://localhost:8080/` 或类似的地址）。在浏览器中打开该地址，你将看到一个简单的 Vue 应用程序。

这样，你就可以使用预设手动配置来创建 Vue 项目。预设配置为你设置了一些默认设置，然后你可以根据项目需求进行修改和定制。这种方式更加灵活，适用于有特定需求的项目。

### 创建项目中出现的bug ###

#### `无法加载文件 D:\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本` ####

这个错误提示表明在您的系统上，PowerShell 脚本的执行被限制了，而在执行 Vue CLI 时，它尝试运行一个 PowerShell 脚本。

解决此问题的方法是允许在您的系统上执行 PowerShell 脚本。您可以按照以下步骤来操作：

1.  **以管理员身份运行 PowerShell**：  
    请确保您使用管理员权限运行 PowerShell。右键单击 PowerShell 快捷方式，然后选择 “以管理员身份运行”。
2.  **修改执行策略**：  
    在管理员模式下打开 PowerShell 后，输入以下命令以修改 PowerShell 的执行策略：
    
        Set-ExecutionPolicy RemoteSigned
    
    或者，如果您想更加开放，可以使用以下命令（但这样可能会降低系统安全性，请谨慎操作）：
    
        Set-ExecutionPolicy Unrestricted
    
    执行后，系统将允许运行本地签名的脚本。
3.  **确认修改**：  
    输入 `Get-ExecutionPolicy` 命令，以确认执行策略已更改为您所需的选项。

请注意，更改执行策略可能会对系统安全性产生影响，因此请确保您知晓这些更改可能带来的潜在风险。如果您不确定如何操作，建议在修改系统设置之前，了解更多关于 PowerShell 执行策略的信息，并在必要时咨询系统管理员。

#### `The Cypress App could not be downloaded.` ####

如果你选择下载 Cypress 的压缩包并手动安装，可以按照以下步骤进行操作：

1.  **设置环境变量 CYPRESS\_INSTALL\_BINARY：**  
    ![在这里插入图片描述][2bd1f1614e294149b83ae770ae1c5b27.png]
2.  **下载对应的安装包，然后在项目目录下的终端窗口执行以下命令：**

npm config set CYPRESS_INSTALL_BINARY="${
        C:\\Program Files\\cypress.zip}

1.  **安装 cnpm：**  
    如果你尚未安装 cnpm，你需要先安装 cnpm。你可以在终端中运行以下命令来全局安装 cnpm：
    
        npm install -g cnpm --registry=https://registry.npm.taobao.org
2.  **使用 cnpm 安装 Cypress：**  
    安装了 cnpm 后，你可以使用以下命令来使用 cnpm 安装 Cypress。在终端中进入你的项目目录，然后运行：
    
        cnpm install cypress --save-dev
    
    这将使用 cnpm 下载并安装 Cypress 安装包，并将其作为开发依赖项保存在你的项目中。
3.  **启动 Cypress：**  
    安装完成后，你可以运行以下命令来启动 Cypress：
    
        npx cypress open
    
    或者，你可以使用 `cnpx` 来执行 cnpm 安装的模块：
    
        cnpx cypress open
    
    这将会打开 Cypress 的测试运行器界面，你可以在这里运行测试、编写测试用例等。

使用 cnpm 来安装 Cypress 可以加速下载速度，因为 cnpm 使用了国内的镜像源。但请注意，使用 cnpm 安装可能会导致一些问题，因为某些 npm 模块可能在 cnpm 上没有完全同步。如果你遇到问题，你也可以尝试使用普通的 npm 或 yarn 进行安装。

[Node.js]: https://nodejs.org/
[7e7d3c24b3bb41caa14a46b97b2a29f3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/356fcb053f1c4031854035a495796016.png
[ce2040ae828b4fed94ca4304ed177df0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/1bb5eb005bc7422bb836fdd0e1b63b41.png
[00e815f70fee42c8b796a60945ba3820.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/67d4d98370a046d09f41403e2a3d9c63.png
[6bb22eda42824ed58fc878de39f5d404.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/459c354c7359449aae9781248adb4d08.png
[94e08aab16ca40488191f40f44d960e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/4bc076778c9c41bcb2ed4ab25e19a07f.png
[548f9d88a94541bbaf4c2b5fcf537ac6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/047fec15084f4eca9f28eedbf9b33cd0.png
[11a35f1ac8774e59a26e7b9520335770.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/82e8910fa72f4a2ba823ac0a9e56b319.png
[927a4915ec5d4db7926e5002ed0f27f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/e9396d7a8cf04f6fb9186857f2a3b755.png
[2bd1f1614e294149b83ae770ae1c5b27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/abd9834143354f41884f2337575a6d7e.png