vue-cli是官方提供的一个脚手架，用于快速生成一vue项目，有点类似JAVA中使用maven构建项目
需要环境Node.js : http://nodejs.cn/download/ 安装完后在windows的cmd窗口输入 node -v及npm -v 如果有版本号，那么说明安装成功 也可以安装淘宝的镜像，这样下载的话会快很多，安装淘宝镜像后可以使用cnpm指令
# -g 全局安装npm install cnpm -gnpm config set registry https://registry.npm.taobao.orgnpm install cnpm -g安装位置：C:UsersAdministratorAppDataRoamingnpm
安装vue-cli#在命令台输入cnpm install vue-cli -g#查看是否安装成功vue list创建第一个vue-cli程序1、在本地磁盘创建一个空文件夹用来存放项目 D:vuevuenote 2、使用控制台在该目录下执行创建vue应用程序指令
D:vuevuenote>vue init webpack first-vue
文章插图
3、一路选择no 4、进入项目目录，安装依赖
D:vuevuenote>cd first-vueD:vuevuenotefirst-vue>cnpm install5、启动项目npm run dev打开浏览器输入 http://localhost:8080/
文章插图
webpackwebpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle.
webpack的使用1、在本地磁盘上创建一个空目录，并使用idea打开
2、按如下结构创建目录和文件
文章插图
3、在hello.js暴露一个sayhai的方法
exports.sayHai=function () {document.write("<h1>hello world</h1>")}4、在main.js导入该方法var hello=require('./hello')hello.sayHai()5、在webpack.config.js中配置打包module.exports={entry:'./modules/main.js',output:{filename:'./js/bundle.js'}}6、在idea控制台运行 webpack指令 运行webpack指令后，会在当前项目的生成dist/js/bundle.js 7、在index.html中引入bundle.js文件<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script src=https://www.isolves.com/it/cxkf/kj/2021-03-17/"dist/js/bundle.js">