vue-cli + webpack 开发步骤—基础

前言

在开始项目搭建之前，要先了解vue和webpack。（参考官方文档）

1. vue官方文档
2. webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）。当webpack处理应用程序时，它会递归地构建一个依赖关系图（dependency graph）,其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。 （webpack官方文档）

安装准备

vue-cli安装要先有npm，npm是node.js的包管理器，所以首先要安装node.js。（node.js下载官网）

补充：刚入门的新手可能还是不太理解npm和node.js，可以参考>>nodejs和npm的关系  >>npm使用介绍

在命令行输入node -v，npm -v可以查看安装结果

​

安装成功后，接下来开始安装vue-cli

npm install vue-cli -g 

​

项目初始化

1.到文件目录下，初始化项目

vue init <template-name> <project-name>

​

2.到f盘下可以找到vue-test，内容如下：

​

安装依赖

到vue-test文件下，执行命令npm install安装package.json中的依赖，依赖安装完成后，会发现vue-test目录下多了一个node_modules文件夹

​

项目运行

执行npm run dev，即可在本地（http://localhost:8080）预览开发效果

​

---

项目构建至此，基础开发环境已搭建完成，具体开发过程中，还需要对webpack做一些个性化的配置，以及很多的坑还要填。后面会出一个爬坑的合集，敬请期待~

---

打包上线

执行命令 npm run build，打包之后vue-test目录下会多出一个dist文件，这就是webpack打包的出口文件，也是最后丢到服务器的文件。

​

补充：打包上线，会出现很多导入路径，以及打包优化的问题，后续会做一个整理，敬请期待~