vue官网

vue@cli官网 必看

Vue项目搭建

方法一：使用@vue/cli

打开vscode的终端

1. 全局安装@vue/cli : yarn global add @vue/cli

• 用vue --version可以看是否安装成功

2. 选择我们要创建Vue项目的根目录（c/xxx/），并进入
3. 创建Vue项目：vue create vue-demo-1

• 这是在当前目录下创建一个名叫vue-demo-1的Vue项目
• 若项目名是. ，表示把当前目录变成一个Vue项目

4. 进行手动配置

• 选错了请Ctrl+C中断然后重来
• 没有截图的都使用默认选项
• 这次的选项只适合本次实验，如果是真实项目， 请自行斟酌选项

  

  

5. 成功后会出现两行代码，照做

cd vue-demo-1 //（终端）进入我们的Vue项目
yarn serve //开启webpack-dev-server预览且会自动更新

6. 用VSCode打开我们的刚才创建的vue-demo-1项目（在终端里start .打开xxx，找到我们的项目打开）,开始写代码就行

方法二：自己从零搭建Vue项目

• 使用webpack或者rollup从零开始
• 适合用Vue半年以上的老手
• 新手请先用方法一学会Vue再尝试方法二

方法三：用codesandbox.io

• 不要登录，这样就可以创建以一个项目
• File → Export ZIP → 解压 → package.json里面可以查看运行方式

vue版本

完整版

1. 有编译器compiler，体积大功能多，可以直接把html字符串变成DOM节点
2. 视图，此处为html字符串，写在index.html里或者写在new Vue构造选项template里
3. 引入方法

• cdn引入：在index.html里用script标签引入，bootcdn：vue.min.js(无注释的完整版)
• webpack引入：需要配置alias（详见官方文档）
• @vue/cli引入：需要额外配置（详见官方文档）

4. 引入后得到一个全局变量window.Vue

非完整版

1. 无编译器compiler，体积小功能少了点
2. 视图，只能自己在new Vue里写构造选项render函数里，用h来创建标签
3. 引入方法

• cdn引入：在index.html里用script标签引入，bootcdn：vue.runtime.min.js(无注释的非完整版)
• webpack引入：默认使用非完整版的
• @vue/cli引入：默认使用非完整版的

4. 引入后得到一个全局变量window.Vue

vue-loader和vue文件+非完整版---vue单文件组件

• 在webpack打包时，vue-loader可以把vue文件翻译成带有render函数的一个对象，这样在main.js里引用就行了，就不用我们自己去写render函数了
• 整个vue文件被翻译成一个对象
• vue文件里的template里的html字符串被翻译成非完整版需要的render函数。

总结：总是使用非完整版，然后配合vue-loader和vue文件

原因:

1. 保证用户体验，用户下载的JS文件体积更小，但只支持render函数
2. 保证开发体验，开发者可直接在vue文件里写HTML标签，而不需要写render函数
3. 因为可以用loader！vue-loader 把vue文件里的HTML转为render函数

具体例子

单纯的非完整版

1. 在index.html里引入run.runtime.min.js
2. 在main.js里

import Vue from "vue";
import { render } from "sass";

Vue.config.productionTip = false; //取消一些提示

new Vue({
  el: "#app", 
  render(h) {
    return h('div',this.n);//这样用
  }
  data : {n:0}
});

3. 预览发现成功

vue单文件组件

1. 在index.html里引入run.runtime.min.js
2. 新建vue文件Demo.vue

<template>                  //在vue文件Demo.vue里的template里写html字符串
  <div id="app">
    {{n}}
    <button @click="add">+1</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  data() {
    return { n: 0 };
  },
  methods: {
    add() {
      this.n += 1;
    }
  }
};
</script>

<style lang="scss">
</style>

3. 在main.js里

import Vue from "vue";
import Demo from "./Demo.vue";//引入vue文件Demo.vue
import { render } from "sass";

Vue.config.productionTip = false; 

new Vue({
  el: "#app", 
  render(h) {
    return h(Demo);   //这样用
  }
});

4. 之后预览时，vue-loader就可以进行转换了。

所以，index.js里面没东西了，只会再后来被替换。这样SEO不友好了！

• SEO（搜索引擎优化）

• 你可以认为搜索引擎就是不停地curl，搜索引擎根据curl结果（源代码）猜测页面内容，

• 如果你的页面都是用JS创建div的，那么curl看不到什么东西

• 原则:让curl能得到页面的信息，SEO就能正常工作

• 解决方法：给curl一点内容，在index.html里把title、meta标签的description和keyword、h1、a写好即可

• 怎么让网页到第一名?浏览的人足够多即可

• 百度花钱就能上第一名

• Google其实能获取JS创建的内容，但不要依赖它