您的位置：首页 > Web前端 > Vue.js

学习 webpack+vue.js （1、先随便创建一个工程）

2017-02-22 14:45 1231 查看
很久没接触前端的东西，感觉现在学个东西都好难啊，相关的东西挺多的。

开始准备

了解下最新的js（es6）语法。不懂也没关系，慢慢来

下载cmder 来替代cmd 控制台。还是不错的
地址：http://cmder.net/
cmder可以配置下环境变量。用win+r可以打开。（具体的网上很多教程）


下载安装node.js。创建你自己的工程目录 并 init下
nodejs的用法可以自行去看看

如果以前下载过nodejs，可以更新下。windows下更新node,需要重新下载最新的版本，安装在相同的目录下就行了。

安装完后



//执行下init.这个文件夹就是你的工程目录了。中间需要填写信息，直接跳过也是可以的
npm init

完了之后命令行文件夹后会带上你的版本号

F:\oschina\vue_test  (vue_test@1.0.0)

4.安装vue

npm install vue

5.安装 webpack。可以先去了解下webpack.这是一个前端模块管理包，现在很流行(所以说要学的很多嘛)

//webpack-dev-server 是用来启动web服务的
//html-webpack-plugin是用来生成html文件和其他相关功能的插件
npm install webpack webpack-dev-server
npm install html-webpack-plugin


webpack 装载各个模块，需要装载器。基本上在一个工程里面，webpack 模块，肯定会用到几个常用的模块装载器

/**
css  用来装载css 文件和 style
file 用来装载 文件
babel 用来装载 js,用babel来解析js文件并把es6的语法转换成浏览器认识的语法
vue-loader 用来装载 vue文件（vue组件component，以.vue文件来实现）
*/

npm install css-loader file-loader babel-core babel-loader babel-preset-es2015 vue-loader
//有时候在打包或运行时，会报一些错。不用怕。例如
//Cannot find module 'vue-template-compiler'...等。那就安装 vue-template-compiler用来识别vue template
npm install vue-template-compiler


6. 其他相关文件

先看下整个文件夹结构。文件夹结构都是自己定的，你可以定自己习惯的结构。我习惯将页面放到webapp下，每个文件夹下一个模块



再来看看其他的一些主要文件

packpage.json

这个文件自动生成的，不用管它。都是你自己填的一些信息

其他的文件都是需要我们手动创建

webpack.config.js

每个工程下都需要有一个叫webpack.config.js 的配置文件.关系到webpack的打包过程。定义入口和输出等。

//我们可以先做个首页。./表示当前目录。../表示上级目录。/表示根目录
/* 引入操作路径模块和webpack */
var path = require('path');
var webpack = require('webpack');
//引入一个插件，可以根据规则和模板自动生成html文件
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//devtool: 'source-map',//配置生成Source Maps.可以不要
/* 入口文件，从这里开始装载 */
entry: {index:__dirname+'/webapp/home/webpack/home.js'},
output: {
/* 输出目录，没有则新建 */
path: path.resolve(__dirname, './webapp/home'),
/* 文件名 */
//也可以写成 [name]-[hash].js  根据文件内容得到的hash值，保证每次修改后的文件名都不一样，避免浏览器缓存问题
filename: 'index.js'
},
module: {
rules: [
/* 用来解析vue后缀的文件 */
{
test: /\.vue$/,
loader: 'vue-loader'
},

{
test: /\.css$/,
loader: 'style-loader!css-loader'
},

/* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
{
test: /\.js$/,
loader: 'babel-loader',
/* 排除模块安装目录的文件 */
exclude: /node_modules/
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: __dirname + "/webapp/home/webpack/template.html"//模板文件.默认会生成index.html文件。你也可以自己制定filename

}),

]
}

header.vue （在home/vue 文件夹下）

<template>
<div>
<ul>
<li>xxx1</li>
<li>xxx2</li>
<li>xxx3</li>
</ul>
其他内容
</div>
</template>
<script>
//先随便弄个vue文件，来试试功能
//template标签是必须要有的。而且template下面必须有个div作为根标签，将其他的内容包起来
</script>

home.js 和 template.html (都在 home/webpack文件夹下)

//这个js作为首页的打包入口
import vue from 'vue';//npm 安装过vue.可以直接import
import header from '../../home/vue/header.vue';

new vue({
el:'#header',//这个是在模板文件中需要替换的div ID.
//这个div将本vue进行重新渲染
render:function(createElement){
return createElement(header);
}
//render:x=>x(header)
})

/**
* 因为在render属性中，createElement只是一个参数名，可以随便改的。
* 所以render函数，可以简化为
*
render:function(h){
return h(header);
}

在最新的js语法（箭头函数 Arrow Functions）中可以可以简化为
h=>h(header).当然你 写成x=>x(header)也是可以的

*
*/

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>vue-webpack</title>
</head>
<body>

<div id='header'>
</div>

</body>
</html>


7.最后先打个包试试。看看结果怎么样



看看文件夹发生了什么变化（图片中说得devtools写错了，应该是devtool）



我们在浏览器中打开index.html。可以看到效果。页面已经把header.vue文件中的内容加载了



接下来你可以试着修改header.vue中的内容。然后重新执行webpack.就可以得到新的index.html了。

但是，这样是不是太麻烦了

8、webpack-dev-server

现在可以使用webpack-dev-server了。我们已经安装过了，不需要再安装了。在命令行使用

webpack-dev-server --inline --host localhost --port 7080 --config webpack.config.js

你可以在package.json文件中找到scripts，这样修改.

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"webpack-dev-server --inline --host localhost --port 7080 --config webpack.config.js"
},
//你可以用npm start 来启动

在浏览器输入.你可以看到页面了。同时你改动vue文件，页面都可以同步刷新。port端口可以自己改

http://localhost:7080/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Vue.js Webpack
相关文章推荐
新的分享
章节导航