vue官网
vue@cli官网 必看
Vue项目搭建
方法一:使用@vue/cli
打开vscode的终端
- 全局安装@vue/cli :
yarn global add @vue/cli
- 用
vue --version
可以看是否安装成功
- 选择我们要创建Vue项目的根目录(c/xxx/),并进入
- 创建Vue项目:
vue create vue-demo-1
- 这是在当前目录下创建一个名叫vue-demo-1的Vue项目
- 若项目名是
.
,表示把当前目录变成一个Vue项目
- 进行手动配置
- 选错了请Ctrl+C中断然后重来
- 没有截图的都使用默认选项
- 这次的选项只适合本次实验,如果是真实项目, 请自行斟酌选项
- 成功后会出现两行代码,照做
cd vue-demo-1 //(终端)进入我们的Vue项目
yarn serve //开启webpack-dev-server预览且会自动更新
- 用VSCode打开我们的刚才创建的vue-demo-1项目(在终端里
start .
打开xxx,找到我们的项目打开),开始写代码就行
方法二:自己从零搭建Vue项目
- 使用webpack或者rollup从零开始
- 适合用Vue半年以上的老手
- 新手请先用方法一学会Vue再尝试方法二
方法三:用codesandbox.io
- 不要登录,这样就可以创建以一个项目
- File → Export ZIP → 解压 → package.json里面可以查看运行方式
vue版本
完整版
- 有编译器compiler,体积大功能多,可以直接把html字符串变成DOM节点
- 视图,此处为html字符串,写在index.html里或者写在
new Vue
构造选项template里 - 引入方法
- cdn引入:在index.html里用
script
标签引入,bootcdn:vue.min.js(无注释的完整版) - webpack引入:需要配置alias(详见官方文档)
- @vue/cli引入:需要额外配置(详见官方文档)
- 引入后得到一个全局变量window.Vue
非完整版
- 无编译器compiler,体积小功能少了点
- 视图,只能自己在
new Vue
里写构造选项render函数里,用h来创建标签 - 引入方法
- cdn引入:在index.html里用
script
标签引入,bootcdn:vue.runtime.min.js(无注释的非完整版) - webpack引入:默认使用非完整版的
- @vue/cli引入:默认使用非完整版的
- 引入后得到一个全局变量window.Vue
vue-loader和vue文件+非完整版---vue单文件组件
- 在webpack打包时,vue-loader可以把vue文件翻译成带有render函数的一个对象,这样在main.js里引用就行了,就不用我们自己去写render函数了
- 整个vue文件被翻译成一个对象
- vue文件里的template里的html字符串被翻译成非完整版需要的render函数。
总结:总是使用非完整版,然后配合vue-loader和vue文件
原因:
- 保证用户体验,用户下载的JS文件体积更小,但只支持render函数
- 保证开发体验,开发者可直接在vue文件里写HTML标签,而不需要写render函数
- 因为可以用loader!vue-loader 把vue文件里的HTML转为render函数
具体例子
单纯的非完整版
- 在index.html里引入run.runtime.min.js
- 在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}
});
- 预览发现成功
vue单文件组件
- 在index.html里引入run.runtime.min.js
- 新建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>
- 在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); //这样用
}
});
- 之后预览时,vue-loader就可以进行转换了。
所以,index.js里面没东西了,只会再后来被替换。这样SEO不友好了!
-
SEO(搜索引擎优化)
-
你可以认为搜索引擎就是不停地curl,搜索引擎根据curl结果(源代码)猜测页面内容,
-
如果你的页面都是用JS创建div的,那么curl看不到什么东西
-
原则:让curl能得到页面的信息,SEO就能正常工作
-
解决方法:给curl一点内容,在index.html里把
title
、meta
标签的description
和keyword
、h1
、a
写好即可 -
怎么让网页到第一名?浏览的人足够多即可
-
百度花钱就能上第一名
-
Google其实能获取JS创建的内容,但不要依赖它