Vue-单文件组件使用说明

.vue文件

.vue文件,称为单文件组件,是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html、css、js

.vue文件由三部分组成:<template><style><script>
<template>
    html
</template>

<style>
    css
</style>

<script>
    js
</script>

vue-loader

浏览器本身并不认为.vue文件,所以必须对.vue文件进行加载解析,此时需要vue-loader
类似的loader还有许多,如:html-loader、css-loader、style-loader、babel-loader等
需要注意的是vue-loader是基于webpack的

webpack

webpack是一个前端资源模板化加载器和打包工具,它能够把各种资源都作为模块来使用和处理
实际上,webpack是通过不同的loader将这些资源加载后打包,然后输出打包后文件
简单来说,webpack就是一个模块加载器,所有资源都可以作为模块来加载,最后打包输出
webpack有一个核心配置文件:webpack.config.js,必须放在项目根目录下
官网

示例,步骤:

1)创建项目,目录结构 如下:

webpack-demo
    |-index.html
    |-main.js   入口文件       
    |-App.vue   vue文件
    |-package.json  工程文件-这里文件记得要加入花括号{}
    |-webpack.config.js  webpack配置文件
    |-.babelrc   Babel配置文件

2)编写App.vue

<template>
  <div id="itany">
    <h1>hello world</h1>
  </div>
</template>
<script>
console.log(123);
</script>
<style>
body {
  background-color: #ccc;
}
</style>

3)安装相关模板
在D:\phpstudy_pro\WWW\vue\webpack-demo路径下执行

cnpm install vue -S

cnpm install webpack -D
cnpm install webpack-dev-server -D

cnpm install vue-loader -D
cnpm install vue-html-loader -D
cnpm install css-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D

cnpm install babel-loader -D
cnpm install babel-core -D
cnpm install babel-preset-env -D  //根据配置的运行环境自动启用需要的babel插件
cnpm install vue-template-compiler -D //预编译模板

合并:cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env  vue-template-compiler

4)编写main.js

/**
 * 使用ES6语法引入模板
 */
 import Vue from 'vue'
 import App from './App.vue'
 
 new Vue({
     el:'#app',
     render:function(h){ //使用render函数渲染组件
         return h(App);
     }
 });

5)编写webpack.config.js

module.exports={
    //配置入口文件
    entry:'./main.js',
    //配置入口文件输出位置
    output:{
        path:__dirname,//项目根路径
        filename:'build.js'
    },
    //配置模块加载
    module:{
        rules:[
           {
            test:/\.vue$/,//所有以.vue结尾的文件都由vue-loader加载
            loader:'vue-loader',
           },
           {
            test:/\.js$/,
            loader:'babel-loader',//所有以.js结尾的文件都由babel-loader加载,除了node_modules以外
            exclude:/node_modules/
           }
        ]
    }
}

6)编写.babelrc

{
    "presets":[
        ["env",{"module":false}]
    ]
}

7)编写package.json

{
  省略。。。。。
  新增下边配置
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev": "webpack-dev-server --open --hot --port 8080"
  }
}

8)编写html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="build.js"></script>
</body>
</html>

9)运行测试

npm run dev 

你可能感兴趣的:(前端专题学习汇总,vue.js,json,webpack)