vue脚手架创建：

1.下载脚手架 npm install -g @vue/cli@4

2.查看版本 vue –version

上面的两步 除非你重装系统 或者重装node 以后都不需要执行了

3.需要把cmd的路径切换到 指定文件夹下

4.创建项目 vue create 项目名

5.把cmd的路径切换到你的项目下

6 启动项目npm run serve

项目怎么启动

我们默认下载的项目 启动命令式npm run serve 但是去公司也是这个样启动吗？

1.去项目下的package.json文件中

2.找到scripts节点进行配置 启动命令就变成 npm run 你配置的单词

注意 只有一个可以不加run 就是start

注意 千万不要拿到项目就直接启动 因为有可能起动不起来 你还要确定项目的依赖文件是否存在 如果不存在

那么你需要cd到这个项目路径下 使用 npm install 进行依赖的下载 项目会根据有你package.json的记录重新下载你的依赖

拿到空项目怎么办？

1.删掉components文件夹下的HelloWord.vue文件

2.在components文件夹下 新建我们自己的xxx.vue文件并且写入如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

来到app.vue中 去关联我们的xxx.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
  <div id="app">
    <!-- 4.删掉 -->
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- 3.使用 -->
    <Home/>
  </div>
</template>

<script>
// 1.引用
import Home from './components/home.vue'

export default {
  name: 'App',
  components: {
    // 2.调用
    Home
  }
}
</script>

<style>
/* 5默认样式删除掉 */
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>

vue文件 单文件组件

每个文件就是一个组件 用来快速创建组件的一种方式

每个.vue文件中有三个部分组件

template

写视图的地方 也就是说 在template中就是写html的地方

坑1

template中只能有一个根节点

1
2
3
4
5
6
7
8
9
10
11
<template>
  <div>
    <div>
        第一个内容
    </div>
    <div>
        第二个内容
    </div>
  </div>
</template>

script

写逻辑的地方

有改变的

只有data和本地模式不一样

脚手架的data写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
// es6模块化暴露
export default {
    // 本地模式的data写法 
    // data:{
    //     xxx:xxx
    // }
    // 脚手架的data写法
    data(){
        return {
            xxxx:xxx
        }
    }
};
</script>

组件的data为什么是一个函数？

因为组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

没有改变的

computed 计算属性

watch 监听

methods 方法

和本地模式一模一样

style

写样式的地方

scoped 注意 当前样式仅对当前组件生效

vue中使用less或者scss

scss

下载 npm install –save node-sass@6 sass-loader@10

在要使用scss的style上 加上声明 lang=”scss”

1
2
3
4
5
6
<style lang="scss" scoped>
$red:pink;
h1{
    color:$red;
}
</style>

组件

什么是组件？

组件就是把项目进行拆分 拆分成一个个的小功能部件 （组件的本质就是用来封装可以复用的UI代码块 提高代码的复用率 加快开发效率）

组件其实就是自定义标签

因为组件在使用的时候就是使用标签的语法来完成 <组件名/> <组件名>

创建组件

1.在components文件夹( 容纳组件的文件夹 ) 新建你的组件.vue文件

2.在.vue中写入 template script style 等内容

3.在需要使用的地方 引用 调用 使用

组件的分类

局部组件—- components

哪个组件引用的 就只能这个组件使用

1.引用

2.调用

3.使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <div>
      <h1>我是shop的h1</h1>
        <!-- 3.使用 -->
        <User/>
  </div>
</template>

<script>
// 1.引用
import User from "./user.vue"
export default {
    // 2.调用组件
    components:{
        User
    }
}
</script>

<style scoped>
    h1{
        color:yellow;
    }
</style>

全局组件—- component

引用完 所有的组件都可以正常使用

1.引用 在main.js中

2.调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vue from 'vue'
import App from './App.vue'

// 全局组件引用
import Demouser from "./components/user.vue"
// 全局组件的调用
// Vue.component("组件起个名字",你所引用的组件)
Vue.component("Demouser",Demouser)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

3.在任意组件中随便使用