vue教程3-webpack搭建项目

vue-cli

https://cli.vuejs.org/zh/

vue-cli是vue的命令行工具，对于创建项目，安装各种组件，运行项目都极为方便，是在开发vue中的必备工具

vue-cli基于nodejs，所以要先安装nodejs。从nodejs官网下载二进制包，然后把nodejs的bin目录加到系统PATH，这样就由全局的npm命令可以调用了。

npm install -g @vue/cli
#安装vue-cli

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install @vue/cli -g
#或者用淘宝源

　　

# vue --version
3.6.2
#安装完后，出现vue命令

　　

vue init

搭建项目的第一步就是初始化目录，需要使用init，先安装

cnpm install -g @vue/cli-init

　　

webpack

webpack是一个模块加载和打包工具，通过使用CommonJS语法把所有浏览器需要的静态资源做相应的准备，比如合并、打包。

它有loader和plugin机制。

loader用于载入各样静态资源，不只是js脚本，还有css-loader，style-loader

plugin对整个流程进行控制。

vue中也有vue-loader，用于把.vue文件转换成webpack包，和整个打包过程融合起来。

如果在本地创建一个简易项目时，一般使用webpack

git地址：https://github.com/vuejs-templates/webpack

使用webpack创建一个名为vue-test的项目

cnpm install -g @vue/cli-init
vue init webpack vue-test
cd vue-test/
npm run dev
#安装init包，
#初始化一个环境，取名vue-test，es，unit test，e2e包先不装，其他选项默认
#运行环境，然后就会由node起一个服务

-->
 DONE  Compiled successfully in 4722ms      

 I  Your application is running here: http://localhost:8081

　　

webpack-simple项目目录

webpack初始化的项目东西还是不少的，这里初始化一个webpack-simple，这个项目模板十分适合初学。

├─.babelrc		// babel配置文件
├─.gitignore
├─index.html		// 主页
├─package.json		// 项目配置文件
├─README.md
├─webpack.config.js	// webpack配置文件
├─dist			// 发布目录
│   ├─.gitkeep
├─src			// 开发目录
│   ├─App.vue		// App.vue组件
│   ├─main.js		// 预编译入口

　　

package.json是vue项目的依赖管理文件，运行npm install时，就会安装这里的包

webpack.config.js是编译配置文件，采用了CommonJS的写法，entry节点配置了编译入口，output节点配置了输出

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
   ...
}
#这段entry和output配置的含义是：编译src/main.js文件，然后输出到dist/build.js文件。
#，执行npm run dev命令后，使用开发环境的话，在dist目录下不会生成build.js文件，开发环境下build.js是在运行内存中的

　　

npm run dev
#运行开发者环境，不会生成dist/build.js
#开发者环境，nodejs会自己起一个web服务
npm run build
#运行生产环境，生成dist/build.js和压缩文件build.js.map
#生产环境，需要服务器提供nginx这样的http服务

　　

webpack项目目录

初始化一个webpack项目模板，目录结构更复杂些。

在simple中，只有一个单一的App.vue，所有功能都在这里面。在webpack中，src目录下有了components目录，布局组件放在其中。

build后，dist目录下，把所有静态资源做了整合。

自动渲染

在dev环境下，webpack会监听src目录下的改动，有改动就会重新渲染

如果改了build和config的内容，则要手动重启node。