首先需要安装node.js和vue-cli。
创建项目指令:$ vue create vue-demo(项目名称)
可以选择默认配置,也可以自己配置sass/less预编译语言、router路由、vuex状态管理工具、eslint语法校验工具、路由模式等。
基本目录结构如下
node_modules??第三方依赖包存放目录,此目录下的文件不会push到git远程仓库上。此目录不需要手动创建,使用npm或yarn命令安装第三方依赖会自动生成。
public??外部静态文件存放目录,如index.html,全局配置文件config.js。
src/assets??内部静态文件存放目录,如fontawesome字体图标源文件、项目可能用到的图片素材等。
src/components??项目公共组件存放目录,多个地方都用到的组件我们会提取到一个vue文件完成并存放至此,其它vue文件通过import方式引入,这不仅可以大大减少代码量,维护时也只需修改一份代码,这是vue特色之一!
src/router??入口文件index.js为搭建项目自动生成,主要配置路由与vue文件的关系,即指定某个路由url为某个vue文件的内容。
src/store??vuex状态管理目录,存在意义是解决父子组件间通信问题,相当于项目的一个公共资源中转站,谁都可以向它提交数据或请求数据,vuex是大型项目必不可少的工具!
src/utils??自建目录,主要存放一些公共的js方法,与组件类似,使用时把它export出去并挂载至vue原型链中即可。
src/views??页面存放目录,存放系统中的页面,建议内部目录结构与路由层级保持一致,方便维护及他人阅读代码。
src/App.vue??可在此处style写全系统公共样式,以及系统启动事件等。
src/mani.js??可在此处按需引入element等第三方组件、挂载vue原型链、配置路由守卫、配置全局filter过滤器等。
package.json??此文件自动生成,主要用于记录项目需要的依赖包及版本、当使用npm install 或 yarn install 命令时,会根据此文件安装依赖包。
vue.config.js??此文件现不会自动生成,需手动创建,主要完成项目的基础配置、如代理服务器、高德地图配置、基础目录、打包输出路径等。
相关文章
- 09-28优购商城项目讲解
- 09-28爱奇艺技术分享:轻松诙谐,讲解视频编解码技术的过去,android项目开发实战入门明日科技
- 09-28构建maven项目,自定义目录结构方法
- 09-28实战SSM_O2O商铺_03项目结构规划及Maven配置
- 09-28Hbuilder项目文件的基本结构
- 09-28SpringBoot项目:员工管理系统(基本结构)
- 09-28Deep Learning.ai学习笔记_第三门课_结构化机器学习项目
- 09-28详解IDEA项目结构:Project Structure
- 09-28js获取树形结构的所有节点(以下调用方法的写法是用在vue项目中)
- 09-282. vue脚手架生成的项目结构