安装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. 【DUBBO】Dubbo原理解析-Dubbo内核实现之SPI简单介绍

    Dubbo采用微内核+ 插件体系,使得设计优雅,扩展性强.那所谓的微内核+插件体系是如何实现的呢!大家是否熟悉spi(service providerinterface)机制,即我们定义了服务接口标准 ...

  2. oracle之 oracle database vault（数据库保险库）

    在12c建库中 Database  Vault 与 Label Security 选项,之前没有留意过,特意记录一下 12.1 中: 12.2 中: 转载:http://www.linuxidc.co ...

  3. win10下安装并启动zookeeper

    下载直接到zk的官网(zookeeper.apache.org)即可,点击右边的Releases,在Download下再点Download进入镜像下载页面,在给出的链接列表里选择一个镜像地址,进去后选 ...

  4. 【转】【备忘录】MySQL性能优化的21个最佳实践 和 mysql使用索引

    今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我 们程序员需要去关注的事情.当我们去设计数据库表结构,对操作数 ...

  5. Memory stream is not expandable

    发现项目有一个地方在做图片缩放剪切的一个操作中.碰到有一些特殊的图片会报 Memory stream is not expandable 的错误 跟踪的时候发现是 由方法 originalStream ...

  6. FPGA的新变化

    FPGA SoC通过融合FPGA和ASIC两者的元件,跨越了灵活性和性能之间的界限.但随着它们进入高安全性.任务关键型市场,它们也面临着与标准SoC相同的问题,包括在日益复杂的器件中快速传输越来越多的 ...

  7. easyui-datebox设置只能选择年月，设置当前月的第一天和最后一天

    来源:https://www.cnblogs.com/xiaoxiao0314/p/7041731.html 1. 设置只能控件只能显示年月:search_date_monthreport为控件id, ...

  8. Spring security 如何设置才能避免拦截到静态资源

    问题:继承FilterSecurityInterceptor自定义Spring security拦截器,但是每次都拦截了css等静态资源,应该如何设置? @Override protected voi ...

  9. [转]SQLite 经验集

    SQLite 的默认时间 转自:http://www.cnblogs.com/pennant/archive/2011/08/11/2134897.html select strftime('%Y-% ...

  10. 列表:list[1],切片list[1:3],追加insert,修改,删除remove,del,pop,查找index,统计count,清空list.clear() 翻转list.reverse(),排序list.sort(),扩展list.extend,

    列表的定义: 列表的使用以及取值:用逗号的方式,取列表两个值,会打印出2个项目,两个项目之间自动有一个空格. 如果想取中间几个值: 请注意,如果取值1和2,那么要写[1,3],要记住这里是顾头不顾尾. ...