一、 安装 npm （命令建议使用 powershell）
二、 npm -v 检测是否安装成功
三、 npm install -g vue-cli 安装脚手架 （用于自动生成 webpack+vue 的项目模板）
四、 vue init webpack-simple myapp 初始化项目（myapp 项目名）
根据提示进行配置 安装 sass
五、 新建文件（夹）
六、修改 App.vue Main.vue index.js 文件
App.vue
<template>
<div>
<Main :propData='initData'/>
</div>
</template>
<script>
import Main from './components/Main'
export default {
data(){
return {
initData: 'hello 你好'
}
},
components:{
Main
}
}
</script>
<style>
</style>
Main.vue
<template>
<div class="container">
<div>{{msg}}</div>
<div>{{propData}}</div>
</div>
</template>
<script>
export default {
name: 'myapp',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
props: {
propData: {
type: String,
default: '我是默认值'
}
}
}
</script>
<style lang="scss">
.container{
text-align: center;
}
</style>
index.js
import Main from './src/components/Main'
// 这一步判断window.Vue是否存在，因为直接引用vue.min.js， 它会把Vue绑到Window上，我们直接引用打包好的js才能正常跑起来。
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.component('myapp', Main)
}
//这样就可以使用Vue.use进行全局安装了。
Main.install = function(Vue){
Vue.component(Main.name, Main)
}
export default Main
七、 修改 package.json
八、 修改 webpack.config.js
九、 打包
1. 加载开发依赖项 npm install -D
2. npm run build dist
十、 运行项目
npm run dev