1.vue-cli 作用

vue-cli作为vue的脚手架，可以帮助我们在实际开发中自动生成vue.js的模板工程。

2.vue-cli 使用

a. 安装全局vue-cli

    npm install vue-cli -g

 b.初始化，生成项目模板（my_project是项目名，自己随意）
    vue init webpack my_project
　　　选项：
    • Project name (baoge)： -----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）。
    • Project description (A Vue.js project)： ----项目描述，也可直接点击回车，使用默认名字
    • Author ()： ----作者，输入你的大名
      接下来会让用户选择：
    • Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了
      Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时，已经有推荐了就选择第一个了
    • Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
    • Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。
      接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接y回车
    • Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，我选择安装y回车
    • Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，我选择安装y回车


 c.进入生成的项目文件夹
    cd my_project

 d.初始化，安装依赖
    npm install
 e.运行
    npm run dev
 
项目目录：

1.index.html ---首页入口文件

(其中 id 为 app 的 div 是页面容器，其中的 router-view 会由 vue-router 去渲染组件，讲结果挂载到这个 div 上。)

<!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Vue Router Demo</title>

 </head>

 <body>

    <div id="app">

       <router-view></router-view>

     </div>

     <script src="dist/bundle.js"></script>

 </body>

 </html>　　

2.main.js ----核心文件

此处的 el:'#app', 表示的是index中的那个 <div id="app"></div>, 它要被 App这个组件 components: { App } 的模板 template: '<App/>'替换。

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  template: '<App/>',

  components: { App }

})

3.App.vue ----项目入口文件

App这个组件 components: { App } 的模板 template: '<App/>' 的具体内容。其中的 router-view 会由 vue-router 去渲染组件，讲结果挂载到这个 div 上

<template>

  <div id="app">

    <img src="./assets/logo.png">

    <router-view></router-view>

  </div>

</template>

<script>

export default {

  name: 'app'

}

</script>

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

4.router/index.js -----路由与组件
import Vue from 'vue'

import Router from 'vue-router'

import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/',

      name: 'Hello',

      component: Hello

    }

  ]

})

vue-cli（vue脚手架） 简单使用的更多相关文章

  1. vue cli & vue 3.x

    vue cli & vue 3.x https://cli.vuejs.org/dev-guide/ui-api.html#ui-api https://cli.vuejs.org/zh/gu ...

  2. Vue CLI 3.x 简单体验

    文档 中文文档 补充于02月10日 vue脚手架的3.x版本已经在开发中,现在还处于alpha版本.我们来看看有哪些变化. 使用 npm install -g @vue/cli 命名方式已经改为npm ...

  3. vue cli创建脚手架

    1.用vscode打开一个文件夹.在菜单栏 点击 查看-集成终端.这里可以用其他的方法比如cmd命令符调开这个界面,但是要用cd 切到要放文件的文件夹下. 2.安装好node.js  和淘宝镜像 3. ...

  4. 使用vue/cli 创建一个简单的项目

    首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...

  5. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  6. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  7. Vue Cli安装以及使用

      因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...

  8. Vue CLI 介绍安装

    https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...

  9. 六. Vue CLI详解

    1. Vue CLI理解 1.1 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI. 使 ...

  10. Vue CLI 是如何实现的 -- 终端命令行工具篇

    Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...

随机推荐

  1. IP通信基础学习第四周(上)

    IP地址现在由因特网名字与号码指派公司ICANN进行分配,它是标志一个主机(或路由器)和一条链路的接口,其编址方法有:分类的IP地址.子网的划分.构成超网. 分类两级IP地址可以记为:IP::={&l ...

  2. ceph运维常用指令

    一.集群 1.启动一个ceph 进程 启动mon进程 service ceph start  mon.node1 启动msd进程 service ceph start mds.node1 启动osd进 ...

  3. C++中的纯虚方法

    在学习数据结构中优先级队列时遇到纯虚方法的定义,一时没想起来,便查了一下. 1.纯虚方法解决什么样的问题,为什么要设计出纯虚方法? 考虑下面的需求,基类声明了一个方法,这个方法只针对具体的子类才有意义 ...

  4. jquery的on()用法实例

    首先,先看官方描述: 再来,用实例解释一下: 1.简单绑定单个事件: $("body").on("click",".edit_btn",fu ...

  5. git cherry-pick 的使用

    之前和同事在不同的分支开发一个功能的不同模块,在自己分支有用到同事分支的一些实现,被老大告诉用git cherry-pick来搞定! git cherry-pick  能够把另一个分支的一个或多个提交 ...

  6. 《视觉SLAM十四讲课后作业》第二讲

    1.设线性⽅程 Ax = b,在 A 为⽅阵的前提下,请回答以下问题:1. 在什么条件下,x 有解且唯⼀? 非齐次线性方程在A的秩与[A|B]的秩相同时方程有解,当R(A)=R(A,B)=n时方程有唯 ...

  7. 2、Storm中的一些概念理解

    1.Tuple,Value,Field Tuple官方解释: "A tuple is a named of values where each value can be any type.& ...

  8. spring框架-jdbc

    一.实体层的不同名字    entity 实体类 :就是和数据库表一一对应的JavaBean  pojo 简单的java对象:任何应用场景的JavaBean  po 持久化对象 :就是和数据库表一一对 ...

  9. android开发_文本按钮 与 输入框

    1 TextView:    属性与值 android:text="文本" android:textSize="20sp"              //sp为 ...

  10. JS getBoundingClientRect（）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...