附：「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」
项目搭建
1. 脚手架
直接看官网文档，写的很详细：Vue-CLI
步骤：
（1）全局安装脚手架包
yarn global add @vue/cli
（2）创建项目
vue create 项目名
（3）进入配置（全过程）
- 选择预设：选最后一个，手动选择功能
- 选择项目中要用的插件（实际项目中根据项目所需选择，这里只做参考，项目要用什么就选择什么）
- 选择一个CSS预处理器：选 dart-sass
- ESLint：默认选项
- 代码错误提示：选第二个，提交的时候再告诉我代码错在哪里了（如果你选第一个，会很影响写代码的体验，一写错页面就会报错误）
- 单元测试：选 Jest
- 配置文件分开放，还是存在package.json文件中：选第一个分开放
- 是否保存刚才配置的选项，做为未来创建项目的默认值？ ==> No（每个项目用的插件其他都不同，一般不保存）
- 创建项目中
- 项目创建成功后，在当前命令行终端进入这个项目，并运行这个项目
2. CodeSandbox
- 使用CodeSandbox创建Vue项目更加方便！
- 官网：codesandbox.io/s/
- 建议：不登录可以创建无限个项目，登录后只能创建50个项目
如何使用Vue实例？
方法一：从HTML得到视图（完整版）
使用CDN
- ](https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">)
- 解析：后缀为 vue.js 的是带注释的，体积大一些，后面vue.min.js是压缩版的，省去了很多不要的东西，体积要比后缀为 vue.js 小很多
项目代码
（1）这里我们使用的是Vue完整版的在线CDN
- index.html
<body>
<div id="app">
{{n}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</body>
- main.js
Vue.config.productionTip = false
new Vue({
el: "#app",
data() {
return {
n: 0
}
}
})
输出结果：
（2）使用非Vue完整版的在线CDN
- index.html
<body>
<div id="app">
{{n}}
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.runtime.min.js"></script>
</body>
- main.js
Vue.config.productionTip = false
new Vue({
el: "#app",
data() {
return {
n: 0
}
}
})
输出结果：页面显示空白（原因是非完整版的没有编译器，无法从HTML、template获取内容）
小总结：非完整版的vue，只要是从HTML、template查看视图都是不支持的
方法二：用 JS 构建视图（解决非完整版无编译器问题）
使用render
项目代码
- index.html
- 这里还是使用的是非完整版的CDN，我们用render函数来解决这个问题
<body>
<div id="app">
{{n}}
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.runtime.min.js"></script>
</body>
- main.js
Vue.config.productionTip = false
new Vue({
el: "#app",
data() {
return { n: 0 }
},
render(h) {
return h("div", [this.n, h("button", {
on: { click: this.add }
}, "+1")])
},
methods: {
add() {
this.n += 1;
}
}
})
输出结果：
方法三：使用 vue-loader（非完整版）
项目代码
- index.html
<body>
<div id="app">
{{n}}
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.runtime.min.js"></script>
</body>
- demo.vue
<template>
<div id="app">
{{n}}
<button @click="add()">+10</button>
</div>
</template>
<script>
export default {
data(){
return {
n:0
}
},
methods:{
add(){
this.n +=10;
}
}
}
</script>
<style>
#app{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#app button {
margin-top: 20px;
padding: 10px;
font-size: 20px;
}
</style>
- main.js
import Vue from 'vue'
import Demo from './demo.vue'
new Vue({
el: "#app",
render(h) {
return h(Demo)
},
})
输出结果：
SEO优化
作用：让网站在浏览器显示靠前
优化内容：
- title
- keyword
<meta name="keyword" value="小何何">
- description
<meta name="description" value="这个是实时发布前端最新消息的网站">
补充：
- 在现在看来，SEO就是一个笑话，无论我们设计的再好，人家花几万块钱，就可以把我们挤在后面了，你的网站永远不可能在搜索结果的第一位。
Vue完整版 和 Vue非完整版的区别
解析：
（1）Vue完整版 和 非Vue完整版的引入方式不同
- Vue完整版是用CDN引入，这个文件名的后缀是 vue.js / vue.min.js（压缩版）
- 非Vue完整版的引入方式有很多，第一个是CDN引入（后缀文件名叫vue.runtime.js）,第二个是webpack引入，第三个就是脚手架（@vue/cli）引入
（2）Vue完整版 和 非Vue完整版的大小不同
- 完整版的要比非完整版的体积多出40%左右
- 原因是完整版多一个编译器（这个编译器很复杂，所以占用的体积比较多）
（3）其他
- Vue完整版下可以在一个组件中创建一个全局组件 或者是 局部组件
- 非完整版不能在一个组件中创建一个全局组件 或者是 局部组件
总结：非完整版都有解决方案了，所以我们开发时尽量都使用非完整版的，减少用户的下载体积。
总结
（1）总是使用非完整版，然后配合vue-loader 和 vue文件
（2）防错小知识，我们引入文件的时候尽量加上后缀（虽然可以省略，但是如果一个目录下存在两个相同的文件，它们只是后缀不同（一个vue，一个js），这样我们字面是很难理解是哪个文件）
