Vue复习笔记-（1）-开发准备与目录结构

2019年8月7日

（1）项目开发准备

1.node与npm准备 npm是node自带的包管理器

2.安装vue-cli脚手架工具。帮助构建vue项目。

npm install -g vue-cli                vue init webpack my-project        2.9.6版本

npm install -g @vue/cli            vue create my-project                    3.0以上版本

3. 利用码云实现代码版本管理

注册码云 创建项目 生成公钥私钥 上传代码

git status      git add .    git commit -m "this is commit message"   git push

(2) 开始开发

注意：建议每次开发前需要新建分支，然后 git pull     git checkout index-swiper    git status

(3)知识回顾 - vue项目的目录结构

build目录是一些webpack的文件，配置参数什么的，一般不用动 。我配置过webpack.base.conf.js里的alias(别名)，其他的还未仔细研究实践。

config是vue项目的基本配置文件 。index.js 是基础配置  其他三个js用于配置开发、测试与生产环境（还没有配置过）。

node_modules是项目中安装的依赖模块

src源码文件夹，基本上文件都应该放在这里。

—assets 资源文件夹，里面放一些静态资源。包括styles(里面可以放.css .styl文件)

—components这里放的都是各个组件文件。components可以按照项目架构划分，然后各部分都可以有自己的components，可以将项目理解成众多components的合集。真正的业务逻辑都是在components中。

—App.vue App.vue组件

—main.js入口文件。整个项目的入口逻辑如下：

    1.在项目最外层有一个index.html，定义了一个最外层的div，id是app

index.html

2.main.js中new了一个vue实例，绑定的就是index.html中的div id=app，在这个vue中，有一个router，一个componens APP 

main.js

    3. App.vue是一个非常简单的单页面组件，就是使用了router-view这个组件

App.vue

4.在router目录下的index.js中，定义了各个路由与对应的组件

router/index.js

    5.然后在各个子组件中进行逻辑编码。

static生成好的文件会放在这个目录下。

test测试文件夹，测试都写在这里

.babelrc babel编译参数，vue开发需要babel编译

.editorconfig 看名字是编辑器配置文件，不晓得是哪款编辑器，没有使用过。

.gitignore 用来过滤一些版本控制的文件，比如node_modules文件夹

index.html 主页

package.json 项目文件，记载着一些命令和依赖还有简要的项目描述信息

README.md 介绍自己这个项目的