vue官方已经写好一个vue-webpack模板vue_cli,原本自己写一个,发现官方写得已经够好了,自己写显得有点多余,但为了让大家熟悉webpack,决定还是一步一步从0开始写,但源文件就直接拷贝官方的
准备工作
- 新建文件夹
D: 3www2018studyvue2017
,下面根目录
指的就是这个目录 - 生成package.json,
根目录>npm init
- 安装webpack和webpack开发服务器,
根目录>cnpm i -D webpack webpack-dev-server
- 安装vue、vuex、vue-router,
根目录>cnpm i -S vue vuex vue-router
- 下载vue_cli的webpack模板中src这个源文件夹到
根目录src
中
安装vueD: 3www2018studywebpack2018>cnpm i vue -S
如果有下面的报错
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
解释: 运行时构建不包含模板编译器,因此不支持 template 选项,只能用 render 选项,但即使使用运行时构建,在单文件组件中也依然可以写模板,因为单文件组件的模板会在构建时预编译为 render 函数
修改 D:/03www2018/study/webpack2018/build/webpackfile.js
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
},
最简单的例子
D:03www2018studywebpack2018 odaywanghome.js
import Vue from 'vue';
const app = new Vue({
template: '<div>hello wolr</div>'
}).$mount('#main')
导入第一个vue组件
// D: 3www2018studywebpack2018 odaywanghome.js
import App from "./app.vue"
import Vue from 'vue';
const app = new Vue({
template: '<App />',
components:{App}
}).$mount('#main')
// D: