vue-cli和webpack

最新推荐文章于 2025-03-30 10:14:53 发布

manmanlu2006

最新推荐文章于 2025-03-30 10:14:53 发布

阅读量2.2k

点赞数 1

分类专栏： web前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/manmanlu2006/article/details/116142796

版权

web前端专栏收录该内容

14 篇文章

订阅专栏

本文围绕Vue展开，介绍了vue-cli这一脚手架工具，包括其安装、项目创建与运行。还阐述了vue项目的入口及运行命令，重点讲解了webpack的理念、核心概念与构建流程。最后说明了打开vue项目的步骤，如安装依赖和启动项目等。

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

一、vue-cli ： vue的脚手架工具

帮助编写好vue的基础代码的工具；

github上查看vue-cli的源码；

二、vue-cli的安装

2.1 先查看node版本：cmd中输入命令：node -v （要求在V4版本以上）

2.2 安装： npm install -g vue-cli (window环境）

sudo npm install -g vue-cli (mac 环境?!）

安装成功后，运行：vue 命令

例如使用命令：vue list。

2.3 创建

vue init webpack sell 创建sell的项目。

配置project的名字、描述、代码检查、测试等；

创建成功后，会提示使用的命令：

依次执行： cd sell （项目目录下） npm install (安装依赖） npm run dev （启动）

三、vue项目介绍

四、vue项目运行

入口：main.js

命令：npm run div

五、webPack

webpack的理念就是一切皆模块化，把一堆的css文件和js文件放在一个总的入口文件，通过require引入，剩下的事情webpack会处理，包括所有模块的前后依赖关系，打包、压缩、合并成一个js文件，公共代码抽离成一个js文件、某些自己指定的js单独打包，模块可以是css/js/imsge/font等等。

https://webpack.docschina.org/

webpack配置文件(webpack.config.js):

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
 
module.exports = {
  // 入口文件，是模块构建的起点，同时每一个入口文件对应最后生成的一个 chunk。
  entry: {
    bundle: [
      'webpack/hot/dev-server',
      'webpack-dev-server/client?http://localhost:8080',
      path.resolve(__dirname, 'app/app.js')
    ]
  },
  // 文件路径指向(可加快打包过程)。
  resolve: {
    alias: {
      'react': pathToReact
    }
  },
  // 生成文件，是模块构建的终点，包括输出文件与输出路径。
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js'
  },
  // 这里配置了处理各模块的 loader ，包括 css 预处理 loader ，es6 编译 loader，图片处理 loader。
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ],
    noParse: [pathToReact]
  },
  // webpack 各插件对象，在 webpack 的事件流中执行对应的方法。
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

掌握以下几个核心概念

Entry: 入口，webpack构建第一步从entry开始
module:模块，在webpack中一个模块对应一个文件。webpack会从entry开始，递归找出所有依赖的模块
Chunk：代码块，一个chunk由多个模块组合而成，用于代码合并与分割
Loader: 模块转换器，用于将模块的原内容按照需求转换成新内容
Plugin:拓展插件，在webpack构建流程中的特定时机会广播对应的事件，插件可以监听这些事件的发生，在特定的时机做对应的事情

webpack构建流程可分为以下三大阶段。

初始化：启动构建，读取与合并配置参数，加载plugin,实例化Compiler
编译：从Entry出发，针对每个Module串行调用对应的Loader去翻译文件中的内容，再找到该Module依赖的Module，递归的进行编译处理
输出：将编译后的Module组合成Chunk,将Chunk转换成文件，输出到文件系统中

六、打开vue项目

首先已经安装好cnpm，webpack，vue-cli
npm install cnpm/webpack/vue-cli -g

在项目下安装依赖
npm install //项目中如果有package-lock.json文件，就先删除再下载，没有就直接下载

启动项目
npm run dev或者npm run serve（新版本的，要用后面的）
————————————————
版权声明：本文为优快云博主「justdoitttt」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/justdoitttt/article/details/109145701