Vue.js+Koa2移动电商 笔记
2024-10-21 05:39:33
一、搭建项目架构:
项目采用Webpack+Vue-router的架构方式,开始安装(基于windows系统)
1.按Win+R,然后在文本框中输入cmd,回车打开命令行,输入vue-cli安装命令:
npm install vue-cli -g
这里的-g代表全局安装。
2.在命令行中初始化项目,我们采用的是webpack模板,输入初始化命令:
vue init webpack MobileEcommerce
这里的MobileEcommerce是我的项目文件夹名称,你可以起一个自己喜欢的名称。安装时根据项目需要配置所需要的模块。这里有一个小技巧,就是在你已经提前建立好了文件夹的时候,我们也进入了文件夹,这时候我们可以省略这个文件夹名称。如下情况:
mikdir MobileEcommerce
cd MobileEcommerce
vue init webpack
3.测试环境是否安装成功
使用如下指令 进行测试环境的打开:
npm run dev
在浏览器中输入 http://localhost:8080
进行测试。
在浏览器中打开页面,出现Vue的正常页面时,说明你的项目已经初始化成功了。下节课我们就可以愉快的进行编程了。
二、Vant的引入
1.安装Vant
安装指令(简写形式)
npm i vant -S
完整写法为:
npm install vant --save
2.优雅的引入Vant
vant是支持babel-plugin-import引入的,它可以让我们按需引入组件模块,并且不用管理我们的样式,现在Vue项目组件库的主流引入方法。 安装babel-plugin-import
npm i babel-plugin-import -D
完整写法为:
npm install babel-plugin-import --save-dev
3.在.babelrc中配置plugins(插件)
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["import",{"libraryName":"vant","style":true}]
]
4.按需使用Vant组件
我们设置好.babelrc后,就可以按需引入Vant框架了。比如现在我们引入一个Button
组件. 在src/main.js里加入下面的代码:
import { Button } from 'vant'
Vue.use(Button)
有了这段代码之后,我们就可以在需要的组件页面中加入Button
了.
<van-button type="primary">主要按钮</van-button>
三、自己mokr数据
最新文章
- _.属性和self.属性,我遇到的那些坑
- Torch 日志文件的保存 logroll
- MYSQL权限表user操作
- Spring Boot 之 RESRful API 权限控制
- ubuntu下java环境变量配置
- Memcached 内存级缓存
- nopCommerce 数据库初试化及数据操作
- SAML - SSO(转)
- [poj 2186]Popular Cows[Tarjan强连通分量]
- Asp.net MVC分页实例
- Kali Linux 新手折腾笔记
- .Net RabbitMQ系列之环境搭建于RabbitMQ基本介绍
- 5分钟了解swagger
- 脚手架vue-cli系列二:vue-cli的工程模板与构建工具
- mysql 原理 ~ double write
- topcoder srm 712 div1
- SpringBoot整合Swagger-ui
- ES(2): Build ES Cluster on Azure VM
- 《TCP/IP 详解 卷1:协议》第 4 章:地址解析协议
- http知识点 前端
热门文章
- jquery.treetable.js
- Git使用总结(廖雪峰git)
- Failed to instantiate the default view controller for UIMainStoryboardFile &#39;Main&#39; - perhaps the designated entry point is not set?
- FirstTry_HelloWorld
- 【oracle】Oracle中as关键字
- 洛谷P2192HXY玩卡片
- MATLAB自带工具箱实现PCA降维代码
- Linux 权限使用 777 真的好吗?
- 【转】关于gcc、glibc和binutils模块之间的关系
- Linux之 find之 ctime,atime,mtime