使用vue+webpack从零搭建项目

vue到现在已经成为一个热门的框架,在项目实践当中,如果想要创建一个新项目,通常都会使用vue-cli的脚手架工具,毋容置疑能够方便很多,很多东西也不需要自己亲自去配置。都知道,脚手架其实是vue结合webpack去实现的。在这里,我就想写一篇从零创建vue结合webpack项目的文章,跟大家学习分享。

一、首先来整理个最简单的目录结构

    |-index.html
|-main.js
|-App.vue
|-package.json
|-webpack.config.js

首先需要个index.html的最终打开页面,然后有一个main.js的js入口文件,还有一个vue后缀的vue文件(vue组件化开发少不了的vue后缀文件),还要一个package.json的工程文件(记录你项目名称、依赖、配置等信息的文件,这里用npm init生成),最后当然少不了的webpack配置文件。

到这里第一步完成。

二、安装webpack及webpack-dev-server

npm install webpack webpack-dev-server --save-dev(或cnpm install webpack webpack-dev-server --save-dev)

运行webpack-dev-server --inline --hot --port 8083

 

三、安装各种依赖。

首先是各种各样的loder和babel编译所需要的包,这里简单列举一下:

vue-loader、vue-html-loader、css-loader、vue-style-loader、babel-loader等loader和vue-hot-reload-api

babel-core、babel-plugin-transform-runtime、babel-preset-es2015、babel-runtime(具体哪个什么功能自行查找了,不是范围内……)

一次性全部安装

cnpm install vue-loader vue-html-loader css-loader vue-style-loader babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime vue-hot-reload-api --save-dev

(由于版本问题,以免带来问题,推荐使用我找的版本,也是试了好久……)

贴一下package.json

1{ 2 "name": "test", 3 "version": "1.0.0", 4 "description": "", 5 "main": "main.js", 6 "scripts": { 7 "dev": "webpack-dev-server --inline --hot --port 8083" 8 }, 9 "author": "", 10 "license": "ISC", 11 "devDependencies": { 12 "babel-core": "^6.17.0", 13 "babel-loader": "^6.2.5", 14 "babel-plugin-transform-runtime": "^6.15.0", 15 "babel-preset-es2015": "^6.16.0", 16 "babel-runtime": "^6.11.6", 17 "css-loader": "^0.25.0", 18 "vue-hot-reload-api": "^1.3.2", 19 "vue-html-loader": "^1.2.3", 20 "vue-loader": "^8.5.4", 21 "vue-style-loader": "^1.0.0", 22 "webpack": "^1.13.3", 23 "webpack-dev-server": "^1.16.2" 24 }, 25 "dependencies": { 26 "vue": "^2.6.7" 27 } 28} 29

package.json

 

别忘了安装vue……

cnpm install vue --save,ok,依赖准备就绪

四、编写webpack.config.js

入口文件是main.js,输出文件bundle.js,同时配置好vue文件的loader和js的loader,代码如下

1module.exports={ 2 entry:'./main.js', 3 4 output:{ 5 path:__dirname, 6 filename:'bundle.js' 7 }, 8 resolve: { 9 alias: { 10 'vue': 'vue/dist/vue.js' 11 } 12 }, 13 module:{ 14 loaders:[ 15 {test:/\.vue$/, loader:'vue'}, 16 {test:/\.js$/, loader:'babel', exclude:/node_modules/} 17 ] 18 }, 19 babel:{ 20 presets:['es2015'], 21 plugins:['transform-runtime'] 22 } 23}; 24

 

五、编写其他页面

index.html页面:

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6</head> 7<body> 8 <div id="app"></div> 9 <script src="bundle.js"></script> 10</body> 11</html> 12

 

main.js

1import Vue from 'vue' 2import App from './App.vue' 3 4new Vue({ 5 el:'#app', 6 components:{App}, 7 template: '<App/>' 8}); 9

 

App.vue

1<template> 2 <h1>{{msg}}</h1> 3</template> 4<script> 5 export default{ 6 data(){ 7 return { 8 msg:'welcome Vue ^_^' 9 } 10 } 11 } 12</script> 13<style> 14 body{ 15 background: #ccc 16 } 17</style> 18

 

六、运行及查看

 

代码交流 2021