如何安装vue
npm install -g @vue/cli
# 或
yarn global add @vue/cli
# 完成后检查版本
vue --version
# 创建一个名为hello-world的目录
vue create hello-world
#根据需要完成相应配置
# 进入目录
cd hello-world
# 开启webpack-dev-serve
yarn serve
完成版与非完整版的区别
-
vue.js完整版- 开发使用（运行时版+编译器）（编译器：将模板字符串编译成为JS渲染函数的代码)，体积大，不建议用，可以从HTML获得视图。
-
vue.runtime.js非完整版- 发布使用 通过webpack内的vue-loader,来调用pomliler,把其转成h()函数，因此体积小，加载速度快
template 和 render 使用
//main.vue
<template>
<div id="app">
{{n}}
<button @click="add">+1</button>
</div>
</template>
// 非完整版使用webpack中的Vue Loader,
// 它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件
import Demo from './main.vue'
new Vue({
render(h){
h(Demo)}
})
使用 vue-loader 和 render 函数可以使没有编译器的非完整版实现完整版的功能
vue-loader可以将模板中的 template,css,script 代码提取出来交给对应的loader处理
Vue实例
Vue实例就如同 jQuery 实例，封装了 DOM 的所有操作，封装了 data 的所有操作。
然后就可以操作 DOM 了，就像监听事件，改变 DOM，操作 data，对 data 进行增删改查。
Vue实例没有封装 ajax，需要使用 axios 的 ajax 功能。
单文件组件
在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。
这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：
-
全局定义 (Global definitions) 强制要求每个
component中的命名不得重复 -
字符串模板 (String templates) 缺乏语法高亮，在
HTML有多行的时候，需要用到丑陋的 \ -
不支持 CSS (No CSS support) 意味着当
HTML和JavaScript组件化时，CSS明显被遗漏 -
没有构建步骤 (No build step) 限制只能使用
HTML和ES5JavaScript，而不能使用预处理器，如Pug (formerly Jade)和Babel
文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。
<template>
<p>{{n}} World!</p>
</template>
<script>
module.exports= f
data: function (){
return {n:0}
}
</script>
<style scoped>
p{
font-size: 2em;
text-align: center
}
</style>
SEO不友好
因为页面内容为 js 生成，因此 curl 获取不到内容，因此需要设置 TITLE keyword description 属性，以便 curl 获取信息，进行搜索引擎优化。
<title>网站标题</title>
<meta name=”Keywords” Content=”关键词1,关键词2,关键词3,关键词4″>
<meta name=”Description” Content=”你网页的简述”>
如何用 CodeSandbox 写 Vue 代码
CodeSandbox 可以方便快速初始化，Vue 、React 、Angular 等项目
- 首先进入
CodeSandbox官网，点击右上角Create Sandbox
-
选择
Vue, 即可享受开始代码之旅！ -
选择
save -
选择
File > Export to ZIP，即可导出代码到 zip 压缩文件