单文件开发
.vue单文件开发依赖webpack的模块机制,将template、script、style封装在单文件中,代码的组织性和可复用性得到增强。
这个模块叫做"vue-loader",官方文档
手动配置webpack
- 安装依赖
npm i -D webpack webpack-cli webpack-dev-server
touch webpack.config.js
npm i -D css-loader
npm i -D vue vue-loader vue-template-compiler
- 编辑node项目配置文件package.json
{
"name": "my-app",
"version": "1.0.0",
"description": "My first singe page web app...",
"private": true, // 防止意外发布
"scripts": {
"dev": "webpack-dev-server --host 0.0.0.0 --port 8080 --open" // 开发服务器脚本
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"vue": "^2.6.11",
"vue-loader": "^15.8.3",
"vue-template-compiler": "^2.6.11",
"css-loader": "^3.4.2",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.3"
}
}
- 编辑配置文件./webpack.config.js