vue-cli 3.0   
npm install -g @vue/cli # OR yarn global add @vue/cli

 

ui 界面创建项目 vue ui

 

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。 命令行创建项目 步骤 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 路径引错 或者文件不存在

 

 

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄