vue开发
通过官手脚手架起步,搭建环境。
>>>Installation
$ npm install -g vue-cli
>>Usage
$ vue init <template-name> <project-name>
>>>>Example:
$ vue init webpack my-project`在这里插入代码片`
根据需要安装插件yes or no,一直回车,脚手架就生成了。接下来剖析脚手架结构。
脚手架结构剖析
在开始写项目之前,我们需要弄清什么地方写什么代码。
build文件夹
webpack配置文件。此处配置webpack规则。整个项目是通过webpack支持的。比如你要使用less,你需要在webapck规则里使用less。
src 文件夹
撸码的地方~基本你所有的代码都在这一块完成。
assets文件夹
存放web中引用的图片 媒体资源。
components文件夹
主要存放可复用组件,你可以在任意页面中复用这些组件。
router文件夹
index.js 路由配置文件。在此处配置各个页面的跳转引用关系。
APP.vue
这里看一看做页面的根部。我们可以在这个页面进行一些css reset 操作。
main.js
根逻辑,页面加载首先会加载这份js文件。
static文件夹
主要存放外部引用资源。比如xxx.min.js
index.html
vue是spa应用,所以只有一个入口,也就是index文件,这里我们进行一些不可更改资源(比如某某库)的引用,和html页面meta 、title之类的设定。
vue核心概念
vue的核心概念是‘数据驱动’,假如我们需要切换view层,我们应该修改的是数据。