webpack 创建 vue脚手架项目

最新推荐文章于 2025-07-05 17:59:59 发布

domunweb

最新推荐文章于 2025-07-05 17:59:59 发布

阅读量612

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/domunweb/article/details/88711806

前端专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何从安装node.js、npm、git开始，逐步使用vue-cli和webpack创建一个Vue项目的详细步骤，包括回答初始化项目时的各项配置，以及解决可能出现的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装 node
  安装地址：  https://nodejs.org/zh-cn/
  node -v 查看nodeJS是否安装成功及版本号
  npm -v 查看npm版本号
2.安装GIT
  安装地址：https://git-scm.com/
  git -version 查看git版本
3.安装全局 vue-li
  CMD 命令窗口输入：npm install --global vue-cli
  或使用 cnpm install --global vue-cli
4.使用webpack构建项目
  输入：vue init webpack projectName (projectName 是你要构建的文件夹名称)
    Q1：projectName target directory exists Continue? (文件夹名称已存在是否继续，若果你的文件夹已经存在会出现这个问题)
            输入：Y(yes)
    Q2：projectname (projectName)? (项目名称？不想填写直接敲回车键，项目名称为默认文件夹名称，不能使用中文和大写英文)
    Q3：project description?(项目描述？不想写直接敲回车)
    Q4：Author(你的git名称和邮箱)？(作者？默认为你的git账号ID和邮箱，敲回车)
    Q5：Vue build？(何种编译方式？)
            选择第一种 Runtime + Compiler: recommended for most users
    Q6：Install vue-router? (是否安装vue路由)
            输入：Y(yes)
    Q7：Use ESLint to lint your code? (是否使用 ESLint 来规范你的代码？)
            输入：Y(yes)
    Q8： Pick an ESLint preset (Use arrow keys) (选择何种代码检测规范)
            选择第一种 Standard (https://github.com/standard/standard)
    Q9： Set up unit tests (Y/n) (是否需要单元测试，根据个人实际情况，一般不需要)
           输入：n(no)
    Q10： Setup e2e tests with Nightwatch? (Y/n) (是否需要e2e(端到端)测试?，根据个人实际情况，一般不需要)
           输入：n(no)
    Q11： Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)
    (项目创建后，我们是否应该为您运行“npm install”？)
            选择第一种 yes, use npm
5.敲回车 webpack自动创建项目
6. npm run dev 运行项目
7. 如果出现 ‘webpack-dev-server’ 不是内部或外部命令，也不是可运行的程序的报错
           输入：cnpm install 或者 npm install 安装项目所需依赖。然后使用npm run dev 再次运行