vue-cli的使用

来源:互联网 发布:edius mac 编辑:程序博客网 时间:2024/05/22 10:25

vue-cli是Vue提供的脚手架工具
作用:不必自己手动配项目环境,提供好基本的项目结构

什么是脚手架
Scaffolding is a meta-programming method of building database-backed software applications. It is a technique supported by some model-view-controller frameworks, in which the programmer may write a specification that describes how the application database may be used. The compiler uses this specification to generate code that the application can use to create, read, update and delete database entries, effectively treating the template as a “scaffold” on which to build a more powerful application.
翻译过来就是:“脚手架”是一种元编程的方法,用于构建基于数据库的应用。许多MVC框架都有运用这种思想。程序员编写一份specification(规格说明书),来描述怎样去使用数据库;而由(脚手架的)编译器来根据这份specification生成相应的代码,进行增、删、改、查数据库的操作。我们把这种模式称为”脚手架”,在脚手架上面去更高效的建造出强大的应用!

vue-cli本身包含很多模板

  1. webpack(主推)
  2. webpack-simple(相比于webpack,没有Eslint代码检查和单元测试)
  3. simple(最简单的模板,什么都不包含,没啥用)
    webpack没出来之前都是用下面这两个模板打包
  4. browserify
  5. browserify-simple

基本使用流程

  1. npm install –global vue-cli 安装Vue命令的环境
    如何验证是否安装ok?
    vue –version
  2. vue init webpack my-project 创建一个基于 webpack 模板的新项目my-project
  3. cd my-project 进入我的项目
  4. npm install 安装依赖模块
  5. npm run dev

如果更改创建好的项目端口
文件夹config=>index.js=>port:8080

项目主要代码的涉及到的文件
index.js
src文件夹

尝试:
新建一个New.vue文件,然后将模板加载到app.vue中
1.新建New.vue文件

<template>  <h1>新建的Vue文件</h1></template>

2.在app.vue中的script中添加

import New from './components/New.vue'
components: {    New  }

3.在app.vue中的template中添加

<new></new>
0 0