vue-cli 3.0
npm install -g @vue/cli
# OR
yarn global add @vue/cli
ui 界面创建项目
vue ui
命令行创建项目 步骤
vue create 项目名
src目录
assets文件夹 放静态资源
component文件夹 放公共组件(基础组件)
view文件夹 页面级组件
app.vue 主文件
main.js 主入口 webpack配置的文件
router.js 路由配置文件
vue项目
运行项目
npm run serve
打包项目
npm run build
运行完之后会多出个dist文件夹 这个是最好上线用的 要在服务端运行
（额外）
npm install http-server -g
在文件夹下面运行 http-server 自动把目录下的index.html当做首页
ES6的模块语法 导出和引入的东西都是一个对象 module(对象)
import 表示引入 必须是通过export导出的
export 表示导出
export default 默认导出
@符号是/src的别名
exact="true" 严格匹配
## vue项目
目录
views文件夹 页面级组件
app.vue 根组件
mains 主入口 webpack配置的
router.js 路由配置文件
assets文件夹 放静态资源
components文件夹 放公共组件(基础组件)
1. 运行项目
npm run serve
2. 打包项目
npm run build
运行完成后会多一个dist文件夹 这个是最后上线用的 要在服务端运行
3. (额外)npm install
http-server -g global 全局 在文件夹下面运行http-server 自动把目录下的index.html 当做首页
4. es6的模块语法 导出和引入的东西都是一个对象 moudle(对象)
import 表示引入 必须是通过export导出的
export 表示导出
export default 默认导出
5. 我们可以把每个.vue文件看成一个组件 // @ is an alias to /src @符号是/src的别名
6.组件的使用三部曲
1） 通过import 引入组件
2) 在components里面注册
3） 用标签的形式使用
7. props传值默认值如果是数组或者对象的时候必须用函数
8. 配置路由跳转
1) router-link 写跳转路径
2) 建立路由对应的.vue文件
3) 配置rouer.js
9. 路由懒加载
通过箭头函数和import方式直接使用
10. spa应用 单页面应用
11. 使用字体图标 https://www.iconfont.cn/
首页 列表页 购物车 返回 个人中心
1) css引入 放在asset 文件夹里面 引入的时候用 ./
2) import 作为模块导入
12. 路由激活的样式 router-link-exact-active router-link-active
exact 严格匹配
13. 导航组件
导航越来越多的时候 需要怎么处理 抽离成公共组件
style lang="less" 表示使用什么方式的css预处理语言 scoped 表示只对当前组件生效
14. 组件化的好处 可复用 可组合 可维护
15. 轮播图组件 在src同级目录下建立一个mock文件夹或者其他任何位置都可以 mock文件夹用来放我们的mock数据mock 里面的代码和前端代码是没有任何关系的
16. ajax请求配置
1）在src 文件夹下面建api/ajax文件夹 这里面放所有的请求 方便管理
在api 文件夹下面建立一个index.js
只要有index.js index.js会被作为默认的入口 写的时候可以省略
import {} from '../api' = '../api/index.js'
2）npm install axios
3) export let getBanner 等于导出一个key，value相对应的对象
17. mockjs app.js 添加跨域配置(cors 跨域资源共享)
```
//允许哪个域名跨域
res.setHeader('Access-Control-Allow-Origin',"*");
//允许哪个方法跨域
res.setHeader('Access-Control-Allow-Methods','PUT,POST,GET,DELETE')
//预检测存活时间，单位是s
res.setHeader('Access-Control-Max-Age',6)
if(req.method==='OPITIONS'){
res.end()//OPITIONS请求不做任何处理
}
```
18. 轮播图 地址：https://github.com/surmon-china/vue-awesome-swiper
下载 npm install vue-awesome-swiper --save
19. 列表页分页
传参：页数(默认第一页)
/list?page=1 1页显示5条数据
加载更多 滚动加载更多 判断什么时候滚动到底部
scrollTop+clientHeight>scrollHeight
20. refs 可以获取元素或者组件
21. 路由跳转 跳转到详情页
使用标签的形式
router-link
tag='li' 把a标签转成需要的标签名 a->li
:to 跳转到哪里 完全等价this.$router.push({name:'detail',query:{id:item.id}})
参数 params query
1)params 不能用path 用name
2) 需要去路由定义参数在路径后面用 /:变量名 /:id 必须有，但是不固定 和params对象传过来的变量名一致 可以是多个 /:id/:name
3) this.$route.params.变量名
4)query 直接使用 this.$route.query query会追显示在地址栏 http://localhost:8080/#/detail?id=1
22.详情页数据
请求详情页 需要传id 根据id来返回对应的数据
##报错
1. can not find moudle
路径引错 或者文件不存在