脚手架
我们先在外面创建好空的项目文件夹，然后用Visual Studio Code软件打开文件。之后就是如下步骤了。
第一步：安装 。如果第一次还没有安装的时候，在使用脚手架之前需要安装脚手架。下次无需安装
npm install -g @vue/cli
第二步：创建一个项目，vue create my-project。在安装完脚手架之后，就可以创建项目了
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目录下
第四步：使用npm run serve命令启动开发模式
当出现结果如下图的时候，说明就已经成功，接下来就可以写代码了
如何创建一个vue的项目
目录结构
| 名称 | 说明 |
|---|---|
| node_modules | 第三方包存储目录 |
| public | 静态资源，已被托管 |
| src | 源代码 |
| .gitignore | git 忽略文件，暂时不关心，我们还没有在项目中使用 git |
| babel.config.js | 先不关心 |
| package.json | 包说明文件 |
| README.md | 项目说明文件 |
| package-lock.json | 包的版本锁定文件 |
| 名称 | 说明 |
|---|---|
| assets | 资源目录，存储静态资源，例如图片等 |
| components | 存储其它组件的目录 |
| App.vue | 根组件 |
| main.js | 入口文件 |
程序的启动
找到
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' //自定义的名称
