如何快速创建一个Vue项目

前置知识

​ 下载 Node.js 并且进行安装和配置 Node.js，因为 npm（Node Package Manager）是随 Node.js 一起安装的。

Node.js 下载地址 : Node.js 官方网站

​ (如果你还没有关于 Node.js&webpack 的相关知识, 最好先学了, 再走 Vue 路线)

前言

两种vue 的开发模式

• 核心包传统开发模式: 基于 html/css/js, 直接引入核心包开发 Vue
• 工程化开发模式: 基于构架工具 (例如: webpack) 的环境中开发 Vue

webpack 工程化缺点

1. webpack 配置麻烦
2. 基础配置重复繁琐
3. 缺乏统一规范标准

这就需要一个工具, 生成标准化 的配置

于是乎, vue/cli 脚手架就来了！

快速创建一个标准架子 脚手架 Vue CLI

• 基本介绍

​ Vue VLI 是 Vue 官方提供的一个全局命令工具

​ 帮助我们快速创建一个开发 Vue 项目的标准化基础架子 [集成 webpack 配置]

​

• 好处

  1. 零配置即用
  2. 内置 babel 等工具
  3. 标准化

• 使用步骤

  1. 一次全局安装 : npm i @vue/cli -g
     安装

     • windows 键 -> 输入cmd -> 以管理员身份运行 -> 输入npm安装指令 (等待) -> 安装成功例 :
       

       检查是否安装

     • 检查是否安装成功 -> 查看版本 命令 : vue – version

       

  2. 创建项目架子 : vue create project(自定义-不能使用中文)

     ​ 在哪创建项目位置

     • 实际上想在哪创建都行, 不过 在工作目录下创建

       ​ 什么是工作目录 ? 如图

       ​

     • 演示在桌面下创建 vue 项目

       1. 在桌面下创建文件夹
          demo

       2. 进入该文件夹, 按住shift键 同时点击右键, 找到 ‘在此处打开powershell 窗口’

          

       3. 点击打开 powershell, 你会看到
          

       4. 输入命令 vue create vue-demo1
          报错

          vue : 无法加载文件 C:\Program Files\nodejs\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsof
          t.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
          所在位置 行:1 字符: 1
          + vue create vue-demo1
          + ~~~
              + CategoryInfo          : SecurityError: (:) []，PSSecurityException
              + FullyQualifiedErrorId : UnauthorizedAccess
          

          原因

          • Windows PowerShell 的脚本执行策略 禁止运行未经授权的脚本导致的。

          解决

          • 右键 PowerShell 底部最小化图标 -> 以管理员身份运行 (注意: 使用管理员权限打开后要更改工作目录, 因为此时工作目录已被重置)

          • 查看当前的执行策略：
            输入以下命令查看当前策略：

            Get-ExecutionPolicy
            

            输出

            Restricted 
            

            则说明脚本被禁止运行。

          • 更改执行策略：
            运行以下命令将执行策略更改为 RemoteSigned，允许运行本地脚本：

            Set-ExecutionPolicy RemoteSigned
            

          • 再次运行创建脚本

            vue create vue-demo1
            

       5. 选择三个 Vue 的版本配置信息
          

          1. Default ([Vue 3] babel, eslint)
             • 使用 Vue 3 的默认配置，包括 babel 和 eslint。
             • 如果你正在学习或开发新项目，建议选择 Vue 3。
          2. Default ([Vue 2] babel, eslint)
             • 使用 Vue 2 的默认配置，包括 babel 和 eslint。
             • 如果你需要兼容较老的项目或使用 Vue 2 的插件，可以选择此项。
          3. Manually select features
             • 手动选择项目的功能和工具，如 TypeScript、Router、Vuex、CSS 预处理器等。
             • 适合需要自定义配置的开发者。

          现在先选择Vue2的, 后面再讲解 Vue3 -> 回车

          直到这样才算完全安装完毕哦

          

  3. 进入所创建项目的目录 cd 你的项目名, 启动服务

     

  4. 等待项目启动 … 出现以下Local 和 Network告诉你服务端口号, 就成功了
     

  5. 浏览器打开, 输入 localhost:8081(要输你的端口号哦) -> 就成功啦
     

总结

1. 全局安装 Vue CLI
   • 命令：npm i @vue/cli -g
   • 检查安装成功：vue --version
2. 创建项目
   • 命令：vue create 项目名
   • 注意：项目名不能包含中文，推荐在工作目录下操作。
   • 若遇 PowerShell 脚本执行限制：
     1. 以管理员身份运行 PowerShell。
     2. 查看执行策略：Get-ExecutionPolicy
     3. 修改策略：Set-ExecutionPolicy RemoteSigned
     4. 重新执行创建命令。
3. 选择配置
   • Vue 3 默认配置：适合新项目。
   • Vue 2 默认配置：适合兼容老项目。
   • 手动选择：适合需要自定义功能。
4. 启动项目
   • 进入项目目录：cd 项目名
   • 启动服务：npm run serve
   • 浏览器访问：localhost:8080（具体端口见启动提示）

如果这篇文章帮到你, 帮忙点个关注呗, 点赞或收藏也行鸭 ～ (｡•ᴗ-)✧

^ '(இ﹏இ`｡)