vue使用vue-cli快速创建工程

本文介绍了vue使用vue-cli快速创建工程，分享给大家，具体如下：

vue-cli安装

npm i vue-cli -g
vue init webpack-simple vue-todos

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。

-g代表全局安装。

i就是install的缩写。

其中webpack-simple代表模板的名称。vue-todos是你给自己的项目起的名称，这个随便起。

配置完成后，可以看到目录下多出了一个项目文件夹，里面就是 vue-cli 创建的一个基于 webpack-simple 的 vue.js 项目。

之后一直回车，，并切换到vue-todos的目录

接着执行

npm i

之后就可以运行了

npm run dev

这时可以修改上述App.vue的文件。

比如改为

<template>
<div id="app">
 <button v-on:click="counter += 1">增加 1</button>
 <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

</template>

<script>
export default {
 name: 'app',
 data () {
  return {
   counter: 0,
  }
 }
}
</script>

其中export default代表导出。然后在main.js利用import导入

运行的话结果就是

总结

vue-cli就是一个根据模板快速创建工程的工具（命令）啦~。

参考

Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目

JavaScript ES6中export及export default的区别

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Vue-cli 创建的项目如何跨域请求

    详解Vue-cli 创建的项目如何跨域请求

    问题描述: 使用 Vue-cli 创建的项目,开发地址是 localhost:8023,需要访问 localhost:9000 上的接口 分析原因: 不同域名之间的访问,需要跨域才能正确请求.跨域的方法很多,通常都需要后台配置 不过 Vue-cli 创建的项目,可以直接利用 Node.js 代理服务器,实现跨域请求 解决方案: 接口地址原本为 /form/save,但是为了匹配代理地址,在前面加一个 /api 如果使用了 axios,可以全局配置一个 baseURL,这样就不用挨个儿修改 url

  • vue-cli+webpack记事本项目创建

    vue-cli+webpack记事本项目创建

    vue-cli+webpack记事本项目使用的是vue-cli2.0里面的项目构建工具webpack 项目的准备工作: 1.了解vue2.0 2.了解一些ES6 3.储备一些webpack知识 参照项目地址:vue2.0构建单页应用最佳实战 我们将会选择使用一些vue周边的库 vue-cli , vue-router , vue-resource , vuex 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resourc

  • vue使用vue-cli快速创建工程

    vue使用vue-cli快速创建工程

    本文介绍了vue使用vue-cli快速创建工程,分享给大家,具体如下: vue-cli安装 npm i vue-cli -g vue init webpack-simple vue-todos vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. -g代表全局安装. i就是install的缩写. 其中webpack-simple代表模板的名称.vue-todos是你给自己的项目起的名称,这个随便起. 配置完成后,可以看到目录下多出了一个项目

  • 三分钟教你如何在IDEA中快速创建工程的方法

    1. 创建Java工程 1. 打开的初始界面 Create New Project:创建一个新的工程 Import Project:导入一个现有的工程 Open:打开一个已有工程.比如:可以打开 Eclipse 项目. Check out from VersionControl:可以通过服务器上的项目地址 check out Github上面项目或其他 Git 托管服务器上的项目 2. 新建项目 如果要创建 Web 工程,则需要勾选上面的 Web Application.如果不需要创建 Web

  • Angular2使用Angular CLI快速搭建工程（一）

    Angular2使用Angular CLI快速搭建工程（一）

    前言: 本文适合Angular2的初学者阅读: 时下web前端发展迅猛,新框架层出不穷,大家都知道三驾马车VueJS,Angular2,React.国内VueJS非常热门,百度热点趋势以1000%的涨幅在增加.Angular2在国外非常受欢迎,在国内的粉丝还非常少,文章不多,究其原因有这么几点主要是学习曲线陡峭,上手困难,(1)angular本身概念难懂,(2)使用typescript开发,用到很多es6特性:(3)配置太多,复杂,工程架构搭建上手难度大.本文为了解决项目搭建的问题,详细的一步步

  • 使用Angular CLI快速创建Angular项目的一些基本概念和写法小结

    Angular CLI是一个命令行界面工具,它可以创建项目.添加文件以及执行一大堆开发任务,比如测试.打包和发布,这里的快速开始就是基于这个命令. 开始项目前,你需要先安装node和npm,然后执行npm install -g @angular/cli安装Angular CLI. 一:用命令行新建一个项目 ng new newApp --skip-install cd newApp cnpm install ng serve --open 执行上面的命令就会自动新建一个Angualr项目,并启动

  • 如何用Vite构建工具快速创建Vue项目

    如何用Vite构建工具快速创建Vue项目

    目录 和Webpack相比,Vite具有以下特点 Vite构建Vue项目 构建过程可能会发生的一些问题 总结 和Webpack相比,Vite具有以下特点 1.快速的冷启动,不需要等待打包 2.即时的热模块更新,真正的按需编译,不用等待整个项目编译完成 Vite构建Vue项目 前提:安装Node.js和Vite 第一步通过npm创建Vite项目 npm init vite-app 项目名称 # 例如 npm init vite-app HelloVue 第二步当项目创建成功后,cd到项目目录 cd

  • Vue脚手架学习之项目创建方式

    一.什么是脚手架? 1.Vue CLI Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 实现的交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发. 一个运行时依赖 (@vue/cli-service),该依赖: 可升级: 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行配置: 可以通过插件进行扩展. 一个丰富的官方插件集合,集成了前端生态中最好的工

  • Vue新搭档TypeScript快速入门实践记录

    Vue新搭档TypeScript快速入门实践记录

    目录 1. 使用官方脚手架构建 2. 项目目录解析 3. TypeScript极速入门 3.1 基本类型和扩展类型 3.2 泛型:Generics 3.3 自定义类型:Interface vs Type alias 3.4 实现与继承:implements vs extends 3.5 声明文件与命名空间:declare 和 namespace 3.6 访问修饰符:private.public.protected 3.7 可选参数 ( ?: )和非空断言操作符(!.) 4. Vue组件的Ts写法

  • Vue.js 60分钟快速入门教程

    Vue.js 60分钟快速入门教程

    vuejs是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新. 当

  • Vue起步(无cli)的啊教程详解

    一丶项目配置 1. 创建身份证文件 2. 安装webpack webpack-cli  webpack-dev-server(全局)工具 3. 安装,配置vue vue-loader  vue-template-compiler  less-loader css-loader  style-loader  less 4. 构建项目目录,更改配置文件 ./index.html //页面文件 <div id="app"></div> <script src=&

  • vue项目查看vue版本及cli版本的实现方式

    查看cli版本,执行如下: vue -V 查看vue版本 npm list vue 补充知识:vue老项目升级vue-cli3.0问题总结 升级步骤 1. 删除原vue-cli并安装vue-cli3.0 2.删除新项目中src下的内容,把原项目中src目录覆盖到新项目中 3.把router从目录文件夹改为文件,src/router/index.js提高一层变成src/router.js 4. 我的项目中src已经分为了views和components所以无需修改,如果不是这个结构需要自己区分下

随机推荐