目录

1. 安装脚手架和项目
2. 项目目录结构说明
3. src目录结构说明
4. 组件
5. 配置less-loader
6. 配置跨域
7. 安装axios,并发送请求
8. 模块化
9. 父子组件通信
10. 路由
11. vuex

安装项目步骤

执行以下命令

1. npm install --global vue-cli
2. vue init webpack my-project

• 安装过程会问你需不需要配置路由、测试等

  Project name 项目名称(enter)
  Porject description 项目描述(enter)
  Author (enter)
  Install vue-router 是否按照vue路由(y)
  use eslint ... 是否使用eslint检查你的代码(n)
  set up unit tests 测试(n)
  set up e2e 测试(n)
  yes use npm (enter)
  

1. cd my-project
2. npm run dev
3. 打开,出现以下界面说明安装成功了
   

   image.png

项目目录结构

node_modules  放置node模块build                  打包配置config                 环境等配置src                      项目源码static                   静态资源index.html           网站访问入口package.json        package-lock.jsonREADME.md

src目录结构

assets             静态资源components    组件router              路由配置views              页面文件App.vue          入口组件main.js            入口文件

组件

一个页面的一个小部件就叫做页面组件

1. 创建头部组件

1. 使用一个组件

• 在APP.vue加上

import Header from '@/components/Header'``* 在export default 的对象里加上

components: {

* 在template里面就可以将Header当做标签来使用

<Header></Header>

1. 按同样方法,创建一个Main组件,并将它放在App.vue里