vue系列教程之微商城项目|项目初始化 / 开普饭

1.项目结构

img

说明

1. dist 项目打包生成的文件夹(启动打包命令才会生成，部署项目时，只需要这个文件夹内容即可)

2. node_modules 存放下载的插件

3. public 网站首页(入口html文件)

4. assets 存放静态资源：如img、css

5. components 存放组件

6. network 用于封装网络请求、集中管理接口

7. router 前端路由

8. store Vuex类型于单例模式的vue对象(一个全局对象，用于全局的状态管理，解决各组件间的通信问题)

9. view 存放编写的页面

10. App.vue 将所有内容分为一个个模块，一定有个最大的模块负责整合所有模块，便是App.vue

11. main.js 项目入口,全局插件引入(部分插件需要注册)的地方，将App.vue挂载到public中的网站首页的地方。

12. .browserslistrc 浏览器适配

13. .gitignore 上传到git时哪些文件需要忽略

14. babel.config.js 项目配置文件之一。

15. package.json 引入插件信息

16. package-lock.json 引入插件真实版本信息

17. README.md 项目说明文件(自己写)

2.初始化

ps：删除不必要文件

1) 清空components 和 views 文件

2）删除router/index.js和 App.vue 中无用的代码

router/index.js (左边删除后、右边删除前)

App.vue

3.安装插件

1)在项目根目录下再打开一个cmd窗口（操作方法见文章一：6.1、6.2）

2)安装vant-ui ,

vant-ui

官网地址：https://vant-contrib.gitee.io/vant/#/zh-CN/swipe

cnpm install vant -S

在 main.js内引入vant-ui

3) 使用任意组件查看是否引入成功

vant-ui官网 --<van-button>组件

App.vue

页面效果

4.配置路径别名

为什么需要配置路径别名

由于项目目录结构较复杂，当在一个文件中引入另一文件时，引用路径过长，不利于开发

举例：

当需要在navBar.vue中引入logo.png,则此时的引用路径为 '../../assets/logo.png'.

通过别名配置，可以在任意地方通过'assets/logo.png'路径来访问logo.png文件

如何配置路径别名

1) 在项目根目录下新建vue.config.js

2) 在vue.config.js文件中写入配置代码

3）每次更改vue.config.js中的代码，需要重新启动项目

npm run serve

本篇文章是该系列文章中的第三篇，讲述的是关于项目的初始化操作。下篇系列文章之导航栏组件封装正在奋力打造中，各位粉丝敬请期待。

实习编辑：隆阳

责编：木有符号

能力越强，责任越大。

实事求是，严谨细致。

（where2go团队）

微信号：算法与编程之美

vue系列教程之微商城项目|项目初始化

相关推荐