如果想要创建一个vue项目，一般可以使用vue-cli，或者是自己用webpack配置，还有就是可以去codesandbox创建一个项目后下载
1. vue-cli
安装
$ yarn global add @vue/cli
创建项目
$ vue create ./path
基础配置
这里可以选择default默认配置也可以自己配置
以上只是个人学习用配置，详细功能可去官网查询
打开预览
$ cd ./path
$ yarn serve
//yarn 脚本 写在package.json中
2. vue的两个版本
- vue.js
- vue.runtime.js
这两个版本的主要区别是前者是完整版，功能更多，但是体积大，而后者是非完整版，功能缺少了conpiler但是体积小了40%左右，具体的区别还有vue实例的使用上
(1)从HTML得到视图
这是完整版vue才有的功能，这里我们要先说一下如何引入完整版
1.从bootcdn引入
直接搜索bootcdn中的vue,然后注意下载这两个版本，min.js 是生产环境版，体积更小
2.webpack中import 引入
import Vue from '../node_modules/vue/dist/vue.js'
注意这里使用的是绝对路径了，如果直接import "vue"则默认引入非完整版，或者可以你可以选择配置一个别名alias
webpack.config.js中配置：
resolve: {
alias: {"vue$":"vue/dist/vue.js"}
}
现在我们已经可以直接在HTML中写入想要渲染的元素了
<html>
<div id="appid">
</div>
</html>
js部分
new Vue({
el:"#appid",
template:`
<div>
{{x}}
</div>
`
data:{
x:000
}
})
这里是能直接从HTML文件中获取到需要渲染的元素，这就是因为完整版有预编译组件，能把template中的html字符串转换成真实的DOM节点
(2)用JS构建视图
非完整版就没有上述功能，所以我们需要自行用一个h函数来把html文件用参数的形式传个这个函数
render(createElement){
const h=createElement
return h("div",[this.n,h("button",{on:{click:this.add}},"+1")])
},
data:{
n:0
},
methods:{
add(){
this.n+=1
}
}
这里的createElement是一个函数，官方文档中是h函数，他可以将传入的参数转换成DOM节点，但是这种写法简直反人类，所以就有了第三种方法
(3)vue-loader
vue-loader就可以将vue文件转换成上述的h函数形式，我们只需要在vue文件中按格式将节点内容用html写好，并导出就可以了
$ yarn add vue-loader --save-dev
webpack额外配置rules
app.vue
<template>
<div class="red">
{{n}}
<button @click="add">+1</button>
</div>
</template>
<script>
//这里可以import "other.vue"
export default {
data(){
return {n:0}
},
methods:{
add(){
this.n+=1
}
}
}
</script>
<style scoped>
.red{
color:red
}
</style>
这里要注意格式，一共3部分，template,script,style
import add from "./demo.vue"
new Vue({
el:"#app",
render(h){
return h(add)
}
在js中只需要将文件导入，然后在vue实例中render就ok了，这样既可以让客户端的vue文件体积减小，在开发端又可以使用完整版的功能。vue实例相关下次再补充，注意vue实例并没有ajax方法，所以建议用axios实现
下面总结一下两种版本vue的区别
Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数
