脚本宝典收集整理的这篇文章主要介绍了【vue】vue组件化开发初体验-示例vue-loader-example学习记录,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
使用了vuejs和webpack,以及一系列webpack加载器,如vue-loader
依葫芦画瓢,试了试,有些具体分析还需要再学习学习,先简单记录下具体的做法,屡屡思绪。
添加github练习源码:https://github.com/dingyiming/learn-Js-vuejs/tree/master/demos/demo-vue-loader-example/demo1
- demo/
+ package.json //npm配置文件
+ webpack.config.js //webpack配置
+ index.html //页面
- node_modules //npm加载的模块
- src //开发资源目录
- assets //一些资源
+ logo.png //图片资源
- components //vue组件
+ a.vue
+ b.vue
+ counter.vue
+ app.vue //布局文件
+ main.js //入口文件
1.生成npm配置文件 package.json
npm init
2.可以粘贴如下配置内容替换到package.json中,或者根据变动进行修改
{
"name": "demo_vue-loader-example",
"version": "0.0.1",
"description": "demo",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --inline --hot --quiet",
"build": "export NODE_ENV=production && webpack --progress --hide-modules"
},
"author": "dingyiming",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-plugin-transform-runtime": "^6.1.18",
"babel-preset-es2015": "^6.1.18",
"babel-preset-stage-0": "^6.1.18",
"babel-runtime": "^6.2.0",
"css-loader": "^0.23.0",
"node-sass": "^3.4.2",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"stylus-loader": "^1.4.2",
"file-loader": "^0.8.5",
"jade": "^1.11.0",
"template-html-loader": "0.0.3",
"vue-hot-reload-api": "^1.2.1",
"vue-html-loader": "^1.0.0",
"vue-loader": "^7.1.4",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"vue": "^1.0.10"
}
}
3.下载node模块
npm install
其实我是一条条用
npm i xxx --save-dev
敲的,没有在package.json
里面的"devDependencies":{}
手动添加内容,可以一个个装(也可以一起敲)如npm i webpack --save-dev
,npm i vue --save
--save-dev
把依赖名和版本要求放在了"devDependencies":{}
,
--save
放在了"dependencies":{}
每敲一个下载完后可以看到
"devDependencies":{}
依赖内容的添加