基于webpack的vue实例

这是我个人在学习vue+webpack的一个实例,希望对读者是有用的,同时也求大神指教。菜鸟第一次写这,水平有限。 目录结构 加

这是我个人在学习vue+webpack的一个实例,希望对读者是有用的,同时也求大神指教。菜鸟第一次写这,水平有限。

目录结构

基于webpack的vue实例

加载依赖

  • 在这之前确保安装了node和npm

  • 加载依赖

{

"name": "05-five-vue",

"version": "1.0.0",

"description": "vue+webapck",

"main": "index.js",

"scripts": {

"test": "echo /"Error: no test specified/" && exit 1",

"start": "webpack-dev-server --hot --inline"

},

"dependencies": {

"vue": "^1.0.18",

"webpack": "^1.12.0"

},

"devDependencies": {

"autoprefixer-loader": "^2.0.0",

"babel": "^6.3.13",

"babel-core": "^6.3.21",

"babel-loader": "^6.2.0",

"babel-plugin-transform-runtime": "^6.3.13",

"babel-preset-es2015": "^6.3.13",

"babel-runtime": "^5.8.34",

"css-loader": "^0.16.0",

"file-loader": "^0.8.5",

"html-loader": "^0.3.0",

"node-sass": "^3.4.2",

"sass-loader": "^3.2.0",

"style-loader": "^0.12.3",

"url-loader": "^0.5.6",

"vue-html-loader": "^1.2.0",

"vue-loader": "^7.2.0",

"webpack": "^1.12.0",

"webpack-dev-server": "^1.14.0"

},

"author": "guowenfh",

"license": "MIT",

"keywords": [

"vue",

"webpack"

]

}

在根目录下创建package.json文件,复制上面的代码,在根目录的DOS命令中运行npm install;

等待下载完后。

webpack配置文件

根目录下创建webpack.config.js文件

var path = require('path');

// NodeJS中的Path对象,用于处理目录的对象,提高开发效率。

// 模块导入

module.exports = {

entry: './src/main.js',

//定义webpack输出的文件,这里设置了让打包后生成的文件放在dist文件夹下的build.js文件中

output: {

path: path.join(__dirname, './dist'),

// 文件地址,使用绝对路径形式

filename: '[name].js',

//[name]这里是webpack提供的根据路口文件自动生成的名字

publicPath: '/dist/'

// 公共文件生成的地址

},

// 服务器配置相关,自动刷新!

devServer: {

historyApiFallback: true,

hot: false,

inline: true,

port:9010

},

//加载器

module: {

// 加载器

loaders: [

// 解析.vue文件

{ test: //.vue$/, loader: 'vue' },

// 转化ES6的语法

{ test: //.js$/, loader: 'babel', exclude: /node_modules/ },

// 编译css并自动添加css前缀

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

//.scss 文件想要编译,scss就需要这些东西!来编译处理

//install css-loader style-loader sass-loader node-sass --save-dev

{ test: //.scss$/, loader: 'style!css!sass?sourceMap'},

// 图片转化,小于8K自动转化为base64的编码

{ test: //.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},

//html模板编译?

{ test: //.(html|tpl)$/, loader: 'html-loader' },

]

},

// .vue的配置。需要单独出来配置

vue: {

loaders: {

css: 'style!css!autoprefixer',

html:'html-loader'

}

},

// 转化成es5的语法

babel: {

presets: ['es2015'],

plugins: ['transform-runtime']

},

resolve: {

// require时省略的扩展名,如:require('module') 不需要module.js

extensions: ['', '.js', '.vue'],

// 别名,可以直接使用别名来代表设定的路径以及其他

alias: {

filter: path.join(__dirname, './src/filters'),

components: path.join(__dirname, './src/components')

}

},

// 开启source-map,webpack有多种source-map,在官网文档可以查到

devtool: 'eval-source-map'

}

编写vue组件

下一步在在components目录下创建app.vue

<template>

<div>

<p>{{message}}</p>

<input v-model="message">

</div>

</template>

<script>

//es6

export default {

el:"#app",

//data:function(){}, 下面是es6写法

data () {

return {

message:"Hello vue!"

}

}

}

</script>

<style lang="sass">

/*测试一下对sass的编译*/

$qwe:#94FF97;

body {

background-color: $qwe;

h1 {

background-color: #eee;

color: red;

transform: translate(10%, 10%);

}

h1:hover {

height:100px;

}

h2 {

background-color: #999;

}

}

</style>

编写入口文件

在src目录下创建main.js文件

//es6语法:

import Vue from "vue";//引入vue

//外部引入别的库都可以用这样的方式,比如jquery等。。

//引入我们编写的测试用vue文件。

import app from './components/app.vue';

Vue.config.debug = true;//开启错误提示

//创建一个vue实例,挂载在#app上

new Vue(app);

到这里一切都准备完毕,现在开始运行 webpack ,wabpack将文件打包到dist目录生成mian.js,等到运行完毕

基于webpack的vue实例

现在打开index.html

基于webpack的vue实例

这里有个热加载的插件,根目录下运行 npm start 打开 http://localhost:9010/ 预料也会出现。但是我这里不知道是不是服务器配置的问题,望大神指出。

未登录用户
全部评论0
到底啦