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
2.main.js中new了一个vue实例,绑定的就是index.html中的div id=app,在这个vue中,有一个router,一个componens APP
3. App.vue是一个非常简单的单页面组件,就是使用了router-view这个组件
4.在router目录下的index.js中,定义了各个路由与对应的组件
5.然后在各个子组件中进行逻辑编码。
static生成好的文件会放在这个目录下。
test测试文件夹,测试都写在这里
.babelrc babel编译参数,vue开发需要babel编译
.editorconfig 看名字是编辑器配置文件,不晓得是哪款编辑器,没有使用过。
.gitignore 用来过滤一些版本控制的文件,比如node_modules文件夹
index.html 主页
package.json 项目文件,记载着一些命令和依赖还有简要的项目描述信息
README.md 介绍自己这个项目的