课程八-Vue.js框架-环境搭建

1.npm常用于后端包管理工具
bower通过npm安装，用于前端包管理工具。//此教程中全部使用npm，不使用bower
2.es5和es6
3.mvvm框架
4.vue中的mvvm框架：
M：模型，js中的数据对象
V：视图，视图模板
VM：视图模型，就是Vue的实例化对象，通过data绑定模型数据，通过el绑定视图模板

5.export和import模块化，在浏览器中，可以使用script type=”module”来调用（测试可以，目前不建议使用）
6.babel
7.webpack：打包工具
8.webpack4打包引用vue2x:
a)runtime方式：在自己的js(如index.js)中导入：import Vue from ‘dist/vue.js’;from后面是vue.js真实路径
b)complier方式：在自己的.vue中导入：import Vue from vue;（此时vue需要通过npm安装，cnpm install vue）
9.完整webpack4使用vue2x的runtime方式：
a)首先创建webpack项目环境，创建目录并进入：mkdir app&& cd app
b)初始化独立项目的开发环境：npm init -y（默认会生成package.json文件）
c)安装webpack:cnpm install webpack webpack-cli
d)增加目录及文件：./index.html,./src,./src/index.js,./webpack.config.js
e)修改打包配置：./webpack.config.js

module.exports={

entry:{

main:"./src/index.js"

//多个kv对应文件

},

output:{

filename:'[name].js'//写一个通用的就行

}

}

import Vue from './dist/vue.js'
//import Vue from 'vue'
//第二种需要在webpack.config.js中添加节点，会在node模块中找：resolve:{
//      alias:{
//          'vue$':'vue/dist/vue.js'
//      }
//  },

var app=new Vue({
el:'#app',
data:{
msg:'hello'
}
})

h)在html文件中使用：

<div id="app">
{{msg}}
</div>

<script src="./dist/app.bundle.js"></script>