安装

用 @vue/cli

  1. npm install -g @vue/cli
  2. # 或
  3. yarn global add @vue/cli
  4. # 完成后检查版本
  5. vue --version
  6. # 创建一个名为hello-world的目录
  7. vue create hello-world
  8. #根据需要完成相应配置
  9. # 进入目录
  10. cd hello-world
  11. # 开启webpack-dev-serve
  12. yarn serve

区别

  • vue.js 完整版

  • 开发使用（运行时版+编译器）（编译器：将模板字符串编译成为JS渲染函数的代码)

    体积大，不建议用，可以从HTML获得视图。

  • vue.runtime.js 非完整版

  • 发布使用 通过webpack内的vue-loader,来调用pomliler,把其转成h()函数，因此体积小，加载速度快

1227210-20200720045927882-369465975.png

template 和 render 使用

  1. //main.vue
  2. <template>
  3.   <div id="app">
  4.     {{n}}
  5.     <button @click="add">+1</button>
  6.   </div>
  7. </template>
  1. // 非完整版使用webpack中的Vue Loader,
  2. // 它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件
  3. import Demo from './main.vue'  
  4. new Vue({
  5.     render(h){
  6.   h(Demo)}
  7. })

使用 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 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。

  1. <template>
  2.     <p>{{n}} World!</p>
  3. </template>
  4. <script>
  5.   module.exports= f
  6.   data: function (){
  7.      return {n:0}
  8.   }
  9. </script>
  10. <style scoped>
  11.   p{  
  12.     font-size: 2em;
  13.     text-align: center
  14.   }
  15. </style>

SEO 不友好

因为页面内容为 js 生成，因此 curl 获取不到内容，因此需要设置 TITLE keyword description 属性，y以便 curl 获取信息，进行搜索引擎优化。

  1. <title>网站标题</title>
  2. <meta name=”Keywords” Content=”关键词1,关键词2,关键词3,关键词4″>
  3. <meta name=”Description” Content=”你网页的简述”>

如何用 CodeSandbox 写 Vue 代码

CodeSandbox 可以方便快速初始化，Vue 、React 、Angular 等项目

  1. 首先进入 CodeSandbox 官网，点击右上角 Create Sandbox
  2. 选择 Vue, 即可享受开始代码之旅！image.png
  3. 选择 save
  4. 选择 File > Export to ZIP，即可导出代码到 zip 压缩文件