脚手架 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