脚手架

我们先在外面创建好空的项目文件夹，然后用Visual Studio Code软件打开文件。之后就是如下步骤了。

第一步：安装 。如果第一次还没有安装的时候，在使用脚手架之前需要安装脚手架。下次无需安装

image.png

npm install -g @vue/cli

第二步：创建一个项目，vue create my-project。在安装完脚手架之后，就可以创建项目了

image.png

C:\Users\THINK\Desktop\脚手架>vue create my-project
​
​
Vue CLI v3.11.0
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
 Manually select features</pre>

出现上面的结果后，按回车键耐心等待就可以了

第三步：使用命令cd my-project跳转到my-project目录下

image.png

第四步：使用npm run serve命令启动开发模式

image.png

当出现结果如下图的时候，说明就已经成功，接下来就可以写代码了

image.png

如何创建一个vue的项目

目录结构

image

程序的启动

• 找到 main.js 入口

• 加载 Vue

• 加载 App 组件

• 创建 Vue 实例

• 将 App 组件替换到入口节点

创建 Vue 实例

<template>
 <div id="app">
 ---------------------------
 这里面写的是我们的元素标签
 //--------------使用组件
 <filmsLi></filmsLi>

 </div>
</template>
<script>
//---------------导入组件vue ,from前面的参数是组件名称 ，from后面的参数是URL地址
import filmsLi from './components/filmsLi.vue' 
//我们在export default对象里面写我们的vue程序
export default {
 name:'app',
 data(){
 return {

 }
 },
 methods:{ 
 },
 //---------------注册组件
 components:{
 filmsLi //全等于 filmsLi：filmsLi
 }
}
</script>
<style scoped>
-------------
里面写的是我们的样式
</style></pre>

分析：

三大部分：

第一部分：template

• 作用：组件的模板

• 注意：只能有一个根节点（template 本身不算）

    <template> <div id="app"> --------------------------- 这里面写的是我们的元素标签 //--------------使用组件 <filmsLi></filmsLi> </div> </template>

第二部分：script

作用：组件的 JavaScript ，用来配置组件的选项（data、methods、watch。。。）

<script>
//---------------导入组件vue ,from前面的参数是组件名称 ，from后面的参数是URL地址
import filmsLi from './components/filmsLi.vue' 
//我们在export default对象里面写我们的vue程序
export default {
 name:'app',
 data(){
 return {

 }
 },
 methods:{ 
 },
 //---------------注册组件
 components:{
 filmsLi //全等于 filmsLi：filmsLi
 }
}
</script></pre>

第三部分：style

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

<style scoped>
-------------
里面写的是我们的样式
</style>

如果要使用less预编译的话，需要安装两个组件

npm i less –D

npm i less-loader -D

安装完成后，就可以使用less了

<style scoped lang="less">
-------------
里面写的是我们的样式
</style></pre>

单文件组件的定义和使用

创建单文件组件

• 推荐把通用组件创建到 components 目录中

• 把视图组件定义到 views 目录中

• 单文件组件只是承载组件的容器而已，既不是全局也不是局部，如果要使用这个单文件组件，必须 注册

  • 全局注册使用，可以在任何组件中使用

    • 局部注册使用，只能在注册的组件中被使用

建立一个单文件的组件

<template>
 <div>
 foo 组件
 </div>
</template>
​
<script>
 export default {
 data() {},
 methods: {}
 // ...
 }
</script>
​
<style></style></pre>

全局注册使用

在 main.js 文件中

import Vue from 'vue'
import Com1 from './components/Com1.vue'
​

​
Vue.component('Com1', Com1)

// 接下来就可以在任何组件中使用 Com1 组件了</pre>

公共样式，我们一般创建在assets文件夹中，然后在 main.js 文件中导入，但不要写名称和from

import Vue from 'vue'
import App from './App.vue'
import './assets/css/resetCss.css' //导入css样式
Vue.config.productionTip = false
new Vue({
 render: h => h(App),
}).$mount('#app')

局部注册使用

<template>
 <div>
 <!-- 使用 Com2 组件 -->
 <Com2></Com2>
 </div>
</template>
<script>
 import Com2 from './components/Com2'
​
 export default {
 components: {
 Com2
 }
 }
</script></pre>

ECMAScript 6 Module

两种导出导入的方式

第一种方式：

导出：export default {}
导入： import {sun} from './assets/sum.js' //花括号里的名字为导出时函数的名字 </pre>

实例：

myAxios函数的导出：
import axios from 'axios'
export function myAxios(pageNum) {
 return axios({ //返回的结果是promises对象
 method: 'get',
 url: 'http://132.232.94.151:3000/api/film/getList',
 // data: {
 //     pageName
 // }
 params: {
 pageNum
 }
 })
}
​
导入：
import {myAxios} from './assets/axios' //花括号里面的内容要和函数名一直</pre>

第二种方式：

导出：export default {}
导入：import filmsLi from './components/filmsLi.vue' //自定义的名称