vue+webpack项目创建过程

最新推荐文章于 2025-05-28 15:51:10 发布

hanxue_tyc

最新推荐文章于 2025-05-28 15:51:10 发布

阅读量713

点赞数

CC 4.0 BY-SA版权

分类专栏： vue踩坑记录

本文链接：https://blog.youkuaiyun.com/hanxue_tyc/article/details/78027707

vue踩坑记录专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何在电脑上创建Vue+Webpack项目。首先确保安装了Node.js和npm，然后通过npm安装cnpm并使用它来安装Webpack和vue-cli。在选择的路径下，利用vue-cli创建项目，可以选择'webpck-simple'或'webpck'模板。项目创建后，安装所需依赖，并了解项目目录结构，特别是`node_modules`和`package.json`文件的作用，以及`webpack.config.js`配置文件的功能。

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

首先电脑确保安装好nodejs，nodejs集成好了npm ，用node -v 、npm -v 测试是否安装成功;
安装cnpm（淘宝镜像）代替npm下载依赖包
npm install -g cnpm –registry=https://registry.npm.taobao.org
安装webpck
cnpm install -g webpack
安装脚手架vue-cli
cnpm install -g vue-cli
选择路径，将控制台指向选定路径，在当前路径下创建工程
vue init webpck-simple my-project(工程名)
vue init webpck my-project
两者创建的项目目录结构差别很大，后者创建的项目包含的依赖很全，前者目录结构相对简单，但是更喜欢前者，然后再根据需要自己手动下载需要的依赖，一步一步理解原理
安装依赖进到已创建的工程路径下 cd my-project 然后 cnpm install
创建好的目录结构，可以根据需要自行修改
主要文件的用途与作用

node_modules : 下载好的依赖包都在该文件夹下

package.json 文件 : 每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

webpack.config.js文件：Webpack在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的webpack.config.js文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 –config 选项来指定配置文件。