Vue 项目搭建

╰半夏微凉° 2023-10-18 22:56 220阅读 0赞

安装 Node.js

安装：

推荐阅读：Windows安装 Node.js

检测：

打开目标文件夹（本文示例：C:\Users\xxx\Desktop\vue_project\xxxx>）在终端中依次运行 node -v 和 npm -v，其中，npm 在安装 node 时会自动安装。若两者均可查看到版本，说明安装成功，如下图所示：
node 安装校验
若安装失败：请使用 npm cache clean 清理缓存后重新安装。

以下所有内容，均可在 VS Code 中操作，原因是其自带终端，可以直接使用 Windows 命令行相关指令；本文相关操作均使用 VS Code 在项目所在文件夹中操作。

安装 VUE-CLI1

  1. 全局安装 vue-cli：npm install --global vue-cli；
  2. 使用 vue -V 查看安装是否成功（V 为大写）。
    在这里插入图片描述

项目生成

  1. 创建一个基于 webpack2 模板的项目：vue init webpack project_name（project_name 为自己项目名称）
  2. 其余项目都可自己选择弄，本人配置如下图所示：
    watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yQmF5bWF4_size_16_color_FFFFFF_t_70
  3. 在项目所在文件夹中启动项目：npm run dev
    在这里插入图片描述
  4. 启动：在浏览器地址中输入 running here 后的地址，则会出现下图，证明启动成功。
    在这里插入图片描述

写在最后

本文中使用的 CLI 版本较老，新版推荐阅读：介绍 | Vue CLI 。

  1. CLI 是 Vue 官方提供的命令行工具，可用于快速搭建大型单页应用； ↩︎
  2. project_name 为自己项目的名字，Webpack 是一个开源的前端打包工具，推荐阅读：webpack 中文文档 ↩︎

发表评论

表情：
评论列表 （有 0 条评论，220人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue项目环境搭建

    [vue-用Vue-cli从零开始搭建一个Vue项目][vue-_Vue-cli_Vue] 　　Vue是近两年来比较火的一个前端框架（渐进式框架吧）。 Vue两大核心思想

    小咪咪小咪咪/ 0 赞/ 445 阅读