VUE-6-3 单文件组件
1..vue文件
.vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js
.vue文件由三部分组成：、
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(需要
浏览器不识别vue文件，所以需要下载vue-loader,vue-loader是基于webpack的； 下载下面这些模块的时候，如果是自己独立开发项目，经常会碰到模块版本不兼容的问题，此时就需要根据命令行的提示错误进行调试；此处因为是学习，所以版本已知，安装固定版本， cnpm install -D [email protected],如果事先已经安装好，不用卸载，直接下载新的就会覆盖掉，并且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 是需要发布到生产环境的 一个JS文件就是一个模块； 都是自己生成的 测试之前，要先修改package.json里面的脚本 scripts脚本 --open:启动之后打开浏览器，--hot 热加载，如果页面改了，浏览器那边自动刷新，--port 指定端口号，默认8080 然后使用 npm run dev 启动的时候如果提示没有脚本的原因，可能是自己的代码没有保存；其他基本上全部属于版本兼容问题； 然后就可以在浏览器中看到自己编写的3.3.安装相关的模块
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-compiler3.4编写main.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运行测试
"scripts": {
"dev": "webpack-dev-server --open --hot --port 8800"
},