Vue学习之五(Vue-cli,jquery导入,路由,购物商城头部,element-ui)

脚手架 Vue-cli

• vue官网=>生态系统=>官方仓库
• 生成空白的vue项目文件
• 带有’beta’字样的是测试版本

2.9.x的版本【推荐】
        安装：npm install -g vue-cli
        检测版本 vue -V/--version

        生成项目:
            首页切换到桌面，在终端里面运行 vue init webpack-simple vue_project

项目资源导入

• 静态资源全局使用 所以在main.js中导入

App.vue

• 导入jquery插件
• 在生命周期钩子函数 mounted中用jquery
• 三部分 :头部,底部(固定) 中间路由占位符

路由

• 安装 vue-router,Vue.use(xxx)
• html部分: <router-link to=""> <router-view></router-view>

• JS部分: 1、定义组件 goodslist.vue shopcart.vue

   2、创建路由对象，设置路由规则(暂时写在main.js)
  
   3、注入到根实例中
  

购物商城头部

• 1、拷贝静态结构

• 2、使用axios发送Ajax请求

• 3、渲染页面

• 4、全局过滤器
  Vue.filter('过滤器名称',(xxx,yyy)=>{})

element-ui 轮播图

• 它适合PC端:
• 移动端:https://mint-ui.github.io/#!/zh-cn
• 1、安装 2、在main.js中导入element-ui并且通过Vue.use(xxx) 3、导入element-ui的样式

今日开发中所需要安装的包

• 第一次安装
  包：file-loader url-loader
  应用场景:因为我们自己的样式文件中，导入了.ttf,.svg等文件
  安装方式:npm i file-loader url-loader -D

• 第二次安装
  包:jquery
  应用场景:App.vue头部的悬停导航里面需要用到它
  安装方式:cnpm i jquery -S

• 第三次安装
  包:vue-router
  应用场景：App.vue中间需要使用路由去切换
  安装方式：cnpm i vue-router -S

• 第四次安装
  包:axios
  应用场景:发送网络请求
  安装方式:cnpm i axios -S

• 第五次安装
  包:moment
  应用场景:全局过滤器格式化事件的时候
  安装方式:cnpm i moment -S

• 第六次安装
  包:element-ui
  应用场景:购物商城头部中间的轮播图
  安装方式:cnpm i element-ui -S