vue-cli脚手架使用-- 初学者

时间:2022-04-23 23:20:03

第一步:

    安装环境:

   1. npm install webpack -g

   2. npm install vue-cli -g

   3. vue init webpack-simple

   出现

    vue-cli脚手架使用-- 初学者

 

    4. npm install 

    5. npm install vue-router vue-resource --save

    6. npm run dev 

    出现下图  说明成功

    vue-cli脚手架使用-- 初学者

 

    写代码正式开始:

         最简单的写法:

         直接在App-vue写如你的代码  如:

         vue-cli脚手架使用-- 初学者

    2.使用组件写代码:component

        a. 在src目录下先建一个component目录  在目录里面创建一个firstcomponent.js文件 如图

   

        vue-cli脚手架使用-- 初学者

       

第一步,引入。在<script></script>标签内的第一行写

import firstcomponent from './component/firstcomponent.vue'

第二步,注册。在<script></script>标签内的 data 代码块后面加上 components: { firstcomponent }。记得中间加英文逗号!!!

export default { data () { return { msg: 'Hello Vue!' } }, components: { firstcomponent } }

第三步,使用
<template></template>内加上<firstcomponent></firstcomponent>

<template>
    <div id="app">
    <img src="./assets/logo.png"> <h1>{{ msg }}</h1> <firstcomponent></firstcomponent> </div>
</template>

   完整代码:

   vue-cli脚手架使用-- 初学者

 

 

路由:

  第一种: 在 main.js中路由  不推荐

   在component目录中创建secondconponent 文件

   在App.vue中写如  如图;

     vue-cli脚手架使用-- 初学者

  在main.js中的代码:

   vue-cli脚手架使用-- 初学者