vue安装与如何引入组件

1.第一步安装

npm install -g vue-cli (如果安装了可以 vue -V 查看是否已经安装)

vue init webpack vue-demo(安装webpack模板)

这里我使用的是简易模板vue init webpack-simple vue-demo

cd vue-demo

npm install

npm install vue-router vuex --save(安装vue-router和vuex)

npm run dev

到这一步说明已经vue已经安装成功了

2.安装element组件和Bootstrap样式

npm install element-ui bootstrap --save

可以在package.json文件查看插件的是否安装

3.文件夹介绍

1）node_modules文件夹

这个文件夹我们是install 命令打包自动生成的

2）src 主要工作的文件夹

a) assets文件夹

主要存放静态资源

b) App.vue

项目入口文件，也是一个vue组件

c)main.js

项目的核心全局配置文件，这里的配置会作用到全局

3）index.html

这是一个html模板，单页面的入口文件，其他页面都填入这个文件

4）package.json

npm包配置文件，里面定义了项目的npm脚本，依赖包等信息

4.主页编写

1) 新建 components 文件夹，用来存放编写的组件

新建components/Header.vue组件

<template>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="py-2" href="/">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
            </a>
            <a href="/" class="navbar-brand">营销服务</a>
              <ul class="navbar-nav">
                <li><a href="#" class="nav-link">优惠券管理</a></li>
                <li><a href="#" class="nav-link">新品推送</a></li>
                <li><a href="#" class="nav-link">通知管理</a></li>
                <li><a href="#" class="nav-link">问卷管理</a></li>
                <li><a href="#" class="nav-link">数据统计</a></li>
            </ul>
        </nav>
    </header>
</template>

2）从App.vue引入Header.vue组件

<template>
  <div id="app">
    <div class="container">
      <app-header></app-header>
    </div>
  </div>
</template>

<script>
//引入bootstrap插件
import 'bootstrap/dist/css/bootstrap.min.css'
import Header from './components/Header';
  export default {
    components: {
      'app-header': Header,
    },
  }
</script>

运行npm run dev

成功显示导航菜单说明组件引入成功了

下一节实现路由的跳转 go!

vue安装与如何引入组件

猜你喜欢