1..vue文件
.vue文件,称为单文件组件,是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html、css、js
.vue文件由三部分组成:<template>、<style>、<script>
<template>
html
</template>
<style>
css
</style>
<script>
js
</script>
2.vue-loader
浏览器本身并不认为.vue文件,所以必须对.vue文件进行加载解析,此时需要vue-loader
类似的loader还有许多,如:html-loader、css-loader、style-loader、babel-loader等
需要注意的是vue-loader是基于webpack的
3.vue单文件组件实例
3.1创建项目
项目目录如下
- node_module是webpack下载的多个库;
- .babelrc:babel配置文件,ES6如何转换为ES5;
- App.vue是vue组件;
- index.html:基本展示内容
- main.js入口文件
- package.json工程文件,npm init --yes自动生成,并且之后自动添加依赖关系,下载了新的版本文件,也会同步自动更新;
- webpack.config.js webpack配置文件
3.2编写App.vue
先编写组件App.vue(需要<template> <style> <script>这几个标签);
<template>
<div id="itany">
<h1>welcome to itany</h1>
</div>
</template>
<script>
console.log(111);
</script>
<style >
body{
background-color: #5bc0de;
}
</style>
3.3.安装相关的模块
浏览器不识别vue文件,所以需要下载vue-loader,vue-loader是基于webpack的;
下载下面这些模块的时候,如果是自己独立开发项目,经常会碰到模块版本不兼容的问题,此时就需要根据命令行的提示错误进行调试;此处因为是学习,所以版本已知,安装固定版本, cnpm install -D vue-loader@1.1.1,如果事先已经安装好,不用卸载,直接下载新的就会覆盖掉,并且package.json里面也会进行更新。
关于-S -D:
npm install module_name -S 即 npm install module_name --save 写入dependencies
npm install module_name -D 即 npm install module_name --save-dev 写入devDependencies
npm install module_name -g 全局安装(命令行使用)
npm install module_name 本地安装(将安装包放在 ./node_modules 下)
dependencies与devDependencies有什么区别呢?
devDependencies 里面的插件只用于开发环境,不用于生产环境
dependencies 是需要发布到生产环境的
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
3.4编写main.js
一个JS文件就是一个模块;
/*
* 使用ES6语法引入模块
*
* */
/*会自动从node_modules下加载模块*/
import Vue from 'vue'
/*同级目录需要加./*/
import App from './App.vue'
new Vue({
el:'#app',
//注册组件:以前的方式
// components:{
// 'my-app':App
// }
//新的方式,是一个render函数来渲染组件,等价于上一种方式,h是一个函数
render:function (h) {
return h(App);
}
});
3.5编写webpack.config.js
module.exports={
// 配置入口文件
entry:'./main.js',
//出口文件,叫什么无所谓,一般都是叫build.js,以后用的都是build.js文件,需要手动在index.html引入
output:{
path:__dirname,//项目根路径
filename:'build.js'
},
// 配置模块加载器
module: {
rules:[
{
//凡是匹配.vue的文件,都是用vue-loader
test:/\.vue$/,
//2.0必须写全
loader:'vue-loader'
},
{
// 凡是匹配js结尾文件,都用babel-loader加载,除了node_module目录
test:/\.js$/,
loader:'babel-loader',
//排除node_modules里面的JS
exclude:/node_modules/
}
]
}
}
3.6编写.babelrc文件
/*只需要写插件,安装的模块里面,只有babel-preset-env是插件,只写env*/
{
"presets":[
["env",{"module":false}]
]
}
3.7编写package.json文件
都是自己生成的
{
"name": "webpack-demo1",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --open --hot --port 8800"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.3.4"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.5.2",
"css-loader": "^0.28.4",
"file-loader": "^0.11.2",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.0.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.4",
"webpack": "^3.0.0",
"webpack-cli": "^3.2.0",
"webpack-dev-server": "^2.5.0"
}
}
4.8运行测试
测试之前,要先修改package.json里面的脚本
scripts脚本 --open:启动之后打开浏览器,--hot 热加载,如果页面改了,浏览器那边自动刷新,--port 指定端口号,默认8080
"scripts": {
"dev": "webpack-dev-server --open --hot --port 8800"
},
然后使用 npm run dev
启动的时候如果提示没有脚本的原因,可能是自己的代码没有保存;其他基本上全部属于版本兼容问题;
然后就可以在浏览器中看到自己编写的<template><style>控制台中的<script>
每种文件的细节理解,还需要深入学习才可。