Vue 使用脚手架创建一个使用案例

小鱼儿 2022-01-27 04:31 232阅读 0赞

### 文章目录 ###

*  脚手架安装(vue-cli)
 *   *  1、安装 Node.js 淘宝镜像加速器（cnpm）
     *  2、安装 vue-cli
 *  使用脚手架初始化项目
 *   *  1、初始化项目
     *  1.1 相关操作 说明
     *  1.2 手动添加所需的依赖库和安装依赖
     *  1.3 启动项目
     *  2、项目结构
     *   *  2.1 项目结构概览
         *  2.2 项目结构说明
 *  案例演示
 *   *  1、静态页面
     *  2、拆分组件
 *  案例代码
 *   *  index.html
     *  入口js : main.js
     *  根Vue: App.vue
     *  根据静态页面所需拆分出的Component
     *   *  1、Header.vue 头部组件
         *  2、Add.vue 添加评论组件
         *  3、Comments.Vue 评论内容组件
         *  4、Item.Vue 评论内容项组件

# 脚手架安装(vue-cli) #

## 1、安装 Node.js 淘宝镜像加速器（cnpm） ##

npm install cnpm -g
    
    # 或使用如下语句解决 npm 速度慢的问题
    npm install --registry=https://registry.npm.taobao.org

## 2、安装 vue-cli ##

cnpm install vue-cli -g
    
    # 查看可以基于哪些模板创建 vue 应用程序，通常我们选择 webpack
    vue list

# 使用脚手架初始化项目 #

## 1、初始化项目 ##

vue init webpack vue-demo1

## 1.1 相关操作 说明 ##

*  Project name：项目名称，默认 回车 即可
 *  Project description：项目描述，默认 回车 即可
 *  Author：项目作者，默认 回车 即可
 *  Install vue-router：是否安装 vue-router，选择 n 不安装（后期需要再手动添加）
 *  Use ESLint to lint your code：是否使用 ESLint 做代码检查，选择 n 不安装（后期需要再手动添加）
 *  Set up unit tests：单元测试相关，选择 n 不安装（后期需要再手动添加）
 *  Setup e2e tests with Nightwatch：单元测试相关，选择 n 不安装（后期需要再手动添加）
 *  Should we run npm install for you after the project has been created：创建完成后直接初始化，选择 n，我们手动执行

## 1.2 手动添加所需的依赖库和安装依赖 ##

npm install vue-router --save-dev
    npm install

## 1.3 启动项目 ##

> 以下2种方式 启动项目

npm start 
    npm run dev

## 2、项目结构 ##

### 2.1 项目结构概览 ###

![项目结构图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fd2VsZWFybg_size_16_color_FFFFFF_t_70]

### 2.2 项目结构说明 ###

*  build 和 config：WebPack 配置文件
 *  node\_modules：用于存放 npm install 安装的依赖文件
 *  **src： 项目源码目录**
 *  **static：静态资源文件**
 *  .babelrc：Babel 配置文件，主要作用是将 ES6 转换为 ES5
 *  .editorconfig：编辑器配置
 *  eslintignore：需要忽略的语法检查配置文件
 *  .gitignore：git 忽略的配置文件
 *  .postcssrc.js：css 相关配置文件，其中内部的 module.exports 是 NodeJS 模块化语法
 *  **index.html：首页，仅作为模板页，实际开发时不使用**
 *  package.json：项目的配置文件
 *  name：项目名称
 *  version：项目版本
 *  description：项目描述
 *  author：项目作者
 *  scripts：封装常用命令
 *  dependencies：生产环境依赖
 *  devDependencies：开发环境依赖

# 案例演示 #

## 1、静态页面 ##

![静态页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fd2VsZWFybg_size_16_color_FFFFFF_t_70 1]

## 2、拆分组件 ##

![组件图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fd2VsZWFybg_size_16_color_FFFFFF_t_70 2]

# 案例代码 #

## index.html ##

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
    
        <link rel="stylesheet" href="./static/css/bootstrap.css">
    
        <title>vue-demo1</title>
      </head>
      <body>
        <div id="app"></div>
        
      </body>
    </html>

## 入口js : main.js ##

import Vue from 'vue'
    import App from './App'
    
    new Vue({ 
      el: '#app',
      components: { App},
      template: '<App/>'
    })

## 根Vue: App.vue ##

<template>
      <div>
        <Header/>
        <div class="container">
          <Add :addComments="addComments"/>
          <List :comments="comments"/>
        </div>
      </div>
    </template>
    
    
    <script>
      import Header from './components/Header'
      import Add from './components/Add'
      import List from './components/List'
    
    
      export default {
        name: "App",
        components: {
          Header,
          Add,
          List
        },
        data () {
          return {
            comments: [
              {
                name: 'Jack',
                content: '我的第一个评论消息'
              },
              {
                name: 'Lucy',
                content: 'Lucy我的第一个评论消息'
              }
            ]
          }
        },
        methods: {
          addComments (comment) {
            this.comments.unshift(comment)
          }
        }
      }
    </script>
    
    
    <style>
    
    </style>

## 根据静态页面所需拆分出的Component ##

![拆分出的组件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fd2VsZWFybg_size_16_color_FFFFFF_t_70 3]

### 1、Header.vue 头部组件 ###

<template>
      <header class="site-header jumbotron">
        <div class="container">
          <div class="row">
            <div class="col-xs-12">
              <h1>请发表对Vue的评论</h1>
            </div>
          </div>
        </div>
      </header>
    </template>
    
    <script>
        export default {
            name: "Header"
        }
    </script>
    
    <style scoped>
    
    </style>

### 2、Add.vue 添加评论组件 ###

<template>
      <div class="col-md-4">
        <form class="form-horizontal">
          <div class="form-group">
            <label>用户名</label>
            <input type="text" class="form-control" placeholder="用户名" v-model="name">
          </div>
          <div class="form-group">
            <label>评论内容</label>
            <textarea class="form-control" rows="6" placeholder="评论内容" v-model="content" @keypress="add()"></textarea>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="button" class="btn btn-default pull-right" @click="add()">提交</button>
            </div>
          </div>
        </form>
      </div>
    </template>
    
    <script>
        export default {
          name: "Add",
          props: {
            addComments: {
              type: Function,
              required: true
            }
          },
          data () {
            return {
              name: '',
              content: ''
            }
          },
          methods: {
            add () {
              if (this.name === '' || this.content === '') {
                alert('您输入的内容为空')
    
                return ;
              }
    
              const comment = {
                name: this.name,
                content: this.content
              }
    
              this.addComments(comment);
            }
          }
    
        }
    </script>
    
    <style scoped>
    
    </style>

### 3、Comments.Vue 评论内容组件 ###

<template>
      <div class="col-md-8">
        <h3 class="reply">评论回复：</h3>
        <h2 v-if="isShow">暂无评论，点击左侧添加评论！！！</h2>
        <ul class="list-group" v-else>
          <Item
            v-for="(comment,index) in comments" :key="index"
            :comment="comment"
            :delComment="delComment"
            :index="index"/>
        </ul>
      </div>
    </template>
    
    <script>
        import Item from './Item'
    
        export default {
          name: "List",
          props: {
            comments: Array
          },
          components: {
            Item
          },
          computed: {
            isShow () {
              return this.comments.length === 0 ? true:false
            }
          },
          methods: {
            delComment (index) {
              this.comments.splice(index,1)
            },
    
          }
        }
    </script>
    
    <style scoped>
      .reply {
        margin-top: 0px;
      }
    
    </style>

### 4、Item.Vue 评论内容项组件 ###

<template>
      <li class="list-group-item">
        <div class="handle">
          <a href="javascript:;" @click="remove(index)">删除</a>
        </div>
        <p class="user"><span >{
       {comment.name}}</span><span>说:</span></p>
        <p class="centence">{
       {comment.content}}</p>
      </li>
    </template>
    
    <script>
        export default {
          name: "Item",
          props: {
            comment: Object,
            delComment: Function,
            index: Number
          },
          methods: {
            remove(index) {
              this.delComment(index);
            }
          }
        }
    </script>
    
    <style scoped>
      li {
        transition: .5s;
        overflow: hidden;
      }
    
      .handle {
        width: 40px;
        border: 1px solid #ccc;
        background: #fff;
        position: absolute;
        right: 10px;
        top: 1px;
        text-align: center;
      }
    
      .handle a {
        display: block;
        text-decoration: none;
      }
    
      .list-group-item .centence {
        padding: 0px 50px;
      }
    
      .user {
        font-size: 22px;
      }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fd2VsZWFybg_size_16_color_FFFFFF_t_70]: /images/20220127/f139c6c233484bddb761a1bf061fca3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fd2VsZWFybg_size_16_color_FFFFFF_t_70 1]: /images/20220127/a4204f8fd1664dbb9199bf69426a40b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fd2VsZWFybg_size_16_color_FFFFFF_t_70 2]: /images/20220127/6b163b0722344c14ac7ca7758c76f5df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fd2VsZWFybg_size_16_color_FFFFFF_t_70 3]: /images/20220127/f300e635527a42d7bddbbc305cf7fc99.png