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。