vue-常用创建项目指令


常用创建项目指令

创建Vue项目命令

1.安装vue-cli

npm install -g @vue/cli

2.创建vuex项目名

vue create 项目名称

3.手动选择

image-20220526202915508

image-20220526203035708

image-20220526203107420

image-20220526203140294

image-20220526203243774

image-20220526203419798

image-20220526203508577

image-20220526203550991

快速创建packageJson

快速创建packageJson

给项目配置路由

安装路由

npm i vue-router@3.5.2 -S

配置路由

配置vue路由1

配置vue路由2

创建项目整体流程

创建黑马头条vue项目

vue create demo-toutiao

配置选择

image-20220530162611171

image-20220530162742109

image-20220530162811932

image-20220530162848567

image-20220530163152843

image-20220530163246547

image-20220530163403800

image-20220530163459203

image-20220530163535452

项目搭建

根组件配置

image-20220530165543974

路由配置

image-20220530165935912

第三方组件库安装

Vant组件库安装
1.官方文档

快速上手 - Vant 3 (gitee.io)

黑马头条项目文档说明(后期优化)

15. 打包发布 | 黑马头条 - 移动端 (liulongbin.top)

2.安装

npm i vant@latest-v2

3.导入组件

image-20220530171541988

image-20220530172114070

4.创建组件

image-20220530173448656

Home组件

image-20220530174014699

User组件

image-20220530174028932

tabbar配置

参考官方文档进行配置

image-20220530174921588

定义路由规则

image-20220530185458085

个人中心

配置复制案例.md中的个人中心

image-20220530190248433

image-20220530191247463

image-20220530191315944

image-20220530191339380

默认是false时可使用 fixed 简写形式 ===== :fixed=”true”

配置接口

安装接口相应的包

npm i axios -S

配置接口

1.封装

image-20220530194812030

image-20220530195235580

注意事项:

1.命名引起的报错

image-20220530185941584

lintOnSave: false

image-20220530185843384

image-20220530193659342

/deep/用来覆盖第三方组件库的样式

但是有点问题

3.设置规则

image-20220530201448668

4.装包时出现此类问题

image-20220531082328095

解决方案:清除缓存npm cache clear --force之后再重新安装依赖npm install

5.接口请求过程

image-20220531203626422

6.git

image-20220609193139511

git pull –rebase origin master

git push origin master


文章作者: Zetai Wei
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Zetai Wei !
评论
  目录