|
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./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团队） |
|
|
