用脚手架创建vue项目

目录

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. 打开http://localhost:8080,出现以下界面说明安装成功了
   
   

   image.png

项目目录结构

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

src目录结构

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

组件

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

1. 创建头部组件

<template>
    <div id="header" @click="test">
        {{msg}}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg: 'header'
            }
        },
        created() {
            // 比如发请求或其他
        },
        methods: {
            test() {
                alert('我是头部');
            }
        }
    }
    
</script>

<style>
    #header {
        height: 60px;
        background: rgba(0,0,0,.6);
    }
</style>

1. 使用一个组件

• 在APP.vue加上

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

components: {
Header,
}

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

<Header></Header>

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