安装vue-cli

npm install -g @vue/cli

1, 使用vue创建一个项目

vue create luffy

2, 安装所需的插件

npm install vue-router

npm i element-ui -S

安装之后可在package.json中的查看

3,在工作目录src下创建router.js, 在components文件下创建Home组件

4, 在main.js(入口文件中导入)

5, 执行流程

　　1, 执行main.js的入口文件,通过$mount("#app"),找到App.vue,然后进行渲染

　　2, 在App.vue中导入,注册,添加组件

使用vue-cli创建一个vue项目的更多相关文章

  1. Vue Create 创建一个新项目 命令行创建和视图创建

    Vue Create 创建一个新项目 命令行创建和视图创建 开始之前 你可以先 >>:cd desktop[将安装目录切换到桌面] >>:vue -V :Vue CLI 3.0 ...

  2. 【vue】创建一个vue前端项目，编译，发布

    npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包. vue-cli: 用户生成Vue工 ...

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

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

  4. 安装Vue和创建一个Vue脚手架项目

    首先 安装node.js,安装成功可以在控制台输入[node --version ]查看node的版本,因为安装了node会自带npm所以我们可以用 [npm --version]查到npm版本  如 ...

  5. 如何利用vue脚手架创建一个vue项目

    1.安装node.js 2.打开命令行查看下npm和node是否都安装好 node -v npm -v 3.安装淘宝镜像cnpm $ npm install -g cnpm --registry=ht ...

  6. 前端框架之Vue(1)-第一个Vue实例

    vue官方文档 知识储备 es6语法补充 let 使用 var 声明的变量的作用域是全局. { var a = 1; } console.info(a); 例1: var arr = []; for ...

  7. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  8. Vue CLI 创建项目

    使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...

  9. 创建一个vue项目的过程

    创建一个vue项目: 1.首先从UI手上拿到PSD设计图,然后看设计搞的内容,需要做个大概的页面布局 2.做vue之前不许安装node,因为做vue项目要和node结合使用 3.然后安装vue脚手架: ...

随机推荐

  1. liunx系统环境下，爆出该错误"org.eclipse.wst.validation" has been removed解决办法

    导出maven工程遇到的问题,"org.eclipse.wst.validation" has been removed,还以为是工程本身的问题,后来发现是eclipse的问题. ...

  2. Sprint第一个冲刺（第十天）

    一.Sprint介绍 更新工程部署文件:实现了云端登录:设计经营情况以及数据分析界面. 实验截图: 任务进度: 二.Sprint周期 看板: 燃尽图:

  3. hadoop之 distcp（分布式拷贝）

    概述 distcp(分布式拷贝)是用于大规模集群内部和集群之间拷贝的工具. 它使用Map/Reduce实现文件分发,错误处理和恢复,以及报告生成. 它把文件和目录的列表作为map任务的输入,每个任务会 ...

  4. springboot上传下载文件

    在yml配置相关内容 spring: # mvc: throw-exception-if-no-handler-found: true #静态资源 static-path-pattern: /** r ...

  5. App测试工具

    1.App性能测试与安全测试工具 性能测试工具:Itest(众测平台) 安全测试:Utest

  6. vs2015安装ORACLE的DbFirst

    不说DbFirst好在哪里,它和ModelFirst,CodeFirst都各有各的好,由于对于已经存在的一个大型的业务库,使用EntityFramework的更倾向于DbFirst,因为好多同事已经习 ...

  7. Python中的url编码问题

    >>> import urllib >>> a = "PythonTab中文网" >>> a 'PythonTab\xe4\x ...

  8. Unit06： 状态管理-cookie

    Unit06: 状态管理-cookie web package web; import java.io.IOException; import java.io.PrintWriter; import ...

  9. javascript基础-js函数

    一.创建函数的方式 1)普通方式 function cal( num1, num2 ) { return num1+num2; } 2)使用变量初始化方式 var plus = function(nu ...

  10. pagination实现分页功能

    pagination.js: /** * pagination分页插件 */ ;(function($,window,document,undefined){ //配置参数 var defaults ...