1.vue-cli 作用

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

2.vue-cli 使用

a. 安装全局vue-cli

  1.     npm install vue-cli -g
  3.  b.初始化，生成项目模板（my_project是项目名，自己随意）
  1.     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回车
  3.  c.进入生成的项目文件夹
  1.     cd my_project
  3.  d.初始化，安装依赖
  1.     npm install
  1.  e.运行
  1.     npm run dev
  1.  
  1. 项目目录：

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

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

  1. <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Vue Router Demo</title>
  6.  </head>
  7.  <body>
  8.     <div id="app">
  9.        <router-view></router-view>
  10.      </div>
  11.      <script src="dist/bundle.js"></script>
  12.  </body>
  13.  </html>　　

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

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

  1. // The Vue build version to load with the `import` command
  2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  3. import Vue from 'vue'
  4. import App from './App'
  5. import router from './router'
  6.  
  7. Vue.config.productionTip = false
  8.  
  9. /* eslint-disable no-new */
  10. new Vue({
  11.   el: '#app',
  12.   router,
  13.   template: '<App/>',
  14.   components: { App }
  15. })

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

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

  1. <template>
  2.   <div id="app">
  3.     <img src="./assets/logo.png">
  4.     <router-view></router-view>
  5.   </div>
  6. </template>
  7.  
  8. <script>
  9. export default {
  10.   name: 'app'
  11. }
  12. </script>
  13.  
  14. <style>
  15. #app {
  16.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
  17.   -webkit-font-smoothing: antialiased;
  18.   -moz-osx-font-smoothing: grayscale;
  19.   text-align: center;
  20.   color: #2c3e50;
  21.   margin-top: 60px;
  22. }
  23. </style>
  24.  
  25. 4.router/index.js -----路由与组件
  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import Hello from '@/components/Hello'
  4.  
  5. Vue.use(Router)
  6.  
  7. export default new Router({
  8.   routes: [
  9.     {
  10.       path: '/',
  11.       name: 'Hello',
  12.       component: Hello
  13.     }
  14.   ]
  15. })

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. 火狐开发----从头用到尾的cfx

    此教程阐述了如何使用 SDK 开发一个简单的扩展. 准备 要想使用 SDK 开发 Firefox 的扩展,您首先需要 安装并激活 SDK.一旦您完成了以上步骤,您将会看到一个命令行窗口. 初始化一个空 ...

  2. 推荐！PlayGround：可视化神经网络

    https://cloud.tencent.com/developer/news/190352 http://playground.tensorflow.org PlayGround是一个在线演示.实 ...

  3. 数据服务器------sql

    服务器:能够在网站中提供各种(浏览网页,收发邮件视频,语言)等服务器的软件与硬件集合. 数据库服务器(软件):(特点:永久海量存储数据:高速的查询){所有其他软件没有的特点} 数据库服务器分类 网状数 ...

  4. .NET EF框架的安装、及三种开发模式

    一.EF框架的安装: 要在VS(如Visual Studio 2012)中使用EF框架,就需要先进行安装. 我们需要给这个应用安装EntityFramework包,引入EF框架相关的内容,我们需要引入 ...

  5. CORS:source,princple,implimentation in Spring

    CORS = Cross-Origin Resource Sharing          一种跨域访问技术 什么是 Origin 要理解CORS,首先得理解什么是 “Origin”.参见RFC645 ...

  6. tomcat 监控脚本

    ps -ef |grep tomcat |grep -w 'atlassian'|grep -v 'grep'|awk '{print $2}' curl -s -o /dev/null -m 10 ...

  7. xshell终端向远程服务器上传文件方法

    centos-7下在本地终端里向远程服务器上传文件,在命令行中执行的软件. 安装命令如下: 在终端里输入如下命令: 会弹出如下窗口 选择你要上传的文件即可上传成功.

  8. 让selenium中的Cromerderive不加载图片设置

    把配置参数(chrom_opt)设置好后将其添加到 browser = webdriver.Chrome(executable_path="chromedriver.exe的路径" ...

  9. SQLServer 2008 R2查看字段约束

    SQLServer 2008 R2 删除字段前检查字段的约束: select a.name,b.name as cname from syscolumns a left join sysobjects ...

  10. 解决来自美国IP的攻击过程

    1.因为最近接口文档confluence服务总是自动关闭.   解决方法: 1.查看阿里云上的报警提示,看到来自外国的Ip的攻击.这时我选择把攻击的IP加入黑名单. 加入黑名单的方法:https:// ...