饮水思源，不要忘了把老师的链接放上。
不学这个还不知道叫“脚手架”的东西，脚手架不是盖房子的时候外面那层绿色的结构吗？
我理解VUE CLI可以帮助搭建一个结构，这个结构包括routers、models、views等等的东西吧。
安装
先安装vue cli
npm i @vue/cli -g
创建项目
vue create . //在已有目录下
vue create project //新建目录
npm run serve //就可以跑起来了
结构
在vue cli的世界里，一个网页被打算成为不同的模块component，不同的模块之间是可以互相嵌套的。
每个component都由三部分组成：
- template，其实就是这个模块的html结构
- script，其实是这个模块的业务逻辑
- style，其实是这个模块的css
我现在还不太能够理解为什么要把网页打散成这样的一个个component，管理起来会不会很麻烦？比如如果每个模块都需要使用同一套css怎么办？每个模块使用相同的js又怎么办？另外就是如果每个模块引入单独的外部js，应该怎么弄？
细化了肯定是好事，不过管理的办法要好才行。
结构
第一个文件：public下面的index.html，里面需要定义一个<div id="app"></div>作为一个Vue控制区域
第二个文件：根目录下的main.js，作为项目的入口文件，会定义router、store等等
第三个文件：App.vue，作为模板入口文件
错误：Do not use 'new' for side effects
解决办法：加注释/ eslint-disable no-new /
eslint语法的问题，具体解决办法在这里
错误：按照视频敲的代码，模板里的内容没有出来
main.js
import Vue from 'vue'
import App from './App.vue'
/* eslint-disable no-new */
new Vue({
el: '#app',
render: c => c(App)
})
App.vue
<template>
<div id="app">123</div>
{{name}}
</template>
<script>
export default {
name: 'App',
data: () => {
return {
name: 'Alex'
}
}
}
</script>
<style scoped>
</style>
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个项目</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
不知道为什么。
解决办法：重新创建了一个项目，对比code后发现，index.html和App.vue都没有问题，但是main.js的code很不一样。系统自带的代码是：
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
对比后觉得，可能是因为Vue的版本不一样导致的。似乎正确的代码相比而言更加简洁一点。
首先import { createApp } from 'vue'
然后import App from './App.vue' 这个跟之前是一样的
最后createApp(App).mount('#app') 看起来是用createApp这个方法，直接使用App这个模板名称，并使用mount来指定index.html的对应的操控部分来起作用的。
回到原来的项目里，将main.js改成上面这段代码，就可以显示123了。
script里的data
之前学习入门课程的时候，变量是直接在script的data里面定义的，在VUE CLI里data变成了一个会return一个对象的函数，所以要写的话就得变成这样:
<script>
export default {
name: 'App', //这里定义了这个组件的名称，在main.js里调用的时候要用到
//我尝试把App改成小写app，发现居然没有什么影响，所以main.js调用的应该是App.vue的文件名，所以这个name在这里有什么用呢？
data: () => {
return {
name: 'Alex'
}
}
}
</script>
我发现所谓箭头函数，其实原来的写法是 function () {}，把function省略掉，然后用一个箭头在括号和花括号之间表示return，其实并不复杂。
添加component组件
在component文件夹下面新建一个以.vue后缀的文件，并包含三个模块（template, script, style）。
之后在App.vue的script里面，将其import并在components里面将名称注册。
之后在App.vue的template里面放置一个容器，可以使用组件的名称，比如<One></One>
（在其他一个视频里学到，如果名称是驼峰命名，可以在template使用中横线和小写字母来命名容器，比如oneTwo可以使用<one-two></one-two>来做容器）
<script>
import One from './components/One.vue'
export default {
name: 'One',
components: {
One: One
}
}
</script>
store文件夹使用vuex
最新回复