`
hereson
  • 浏览: 1428698 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

用vue官方提供的模板vue-cli搭建一个helloWorld案例

    博客分类:
  • vue
阅读更多
安装环境
安装node.js并配置环境变量
安装淘宝镜像,npm install -g cnpm --registry=https://registry.npm.taobao.org
安装webpack,cnpm install webpack -g
安装脚手架npm install vue-cli -g
创建项目
在硬盘上找一个文件夹放工程用的,在终端中进入该目录,cd目录路径
根据模板创建项目,vue init webpack-simple 工程名字<工程名字不能用中文>,vue init webpack 工程名字<工程名字不能用中文>,

6、Install vue-router? 选择Y
7、User ESLint to lint your code? 选N
8、Setup unit tests with Karma + Mocha? 问的是否要测试 选N
9、Setup e2e tests with Nightwatch? 选N

模板解读


cd进入创建的工程目录
安装项目依赖,npm install,不要使用cnpm install安装(会导致后面缺了很多依赖库)
安装网络请求模块vue-resource,cnpm install vue-resource --save
启动项目 npm run dev,启动完毕后,在浏览器输入http://localhost:8080,就能看到初始界面了
分享到:
评论

相关推荐

    使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析

    主要介绍了用vue官方提供的模板vue-cli搭建一个helloWorld案例,需要的朋友可以参考下

    vue-cli-plugin-generators:一个Vue CLI插件以生成组件或页面

    vue-cli-plugin-generators 描述 用于生成组件或页面的 Vue CLI 插件。 支持 成分 证监会(.vue) 多伦多证券交易所(.tsx) ... * @file HelloWorld */ import { defineComponent , ref } from 'vue' ;

    Vue+Ant Design Vue学习经验分享1.doc

    2.3 Vue之HelloWorld 2.4 Vue的生命周期 2.5 Vue的常用指令 2.6 Vue-CLI脚手架介绍 2.7 使用Vue-cli构建Vue项目 2.8 Vue项目及其目录结构说明 2.9 基于vuedemo项目简单的功能 2.10 Vue以及VueCLi运行机制的...

    vue集成openlayers加载geojson并实现点击弹窗教程

    本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程,供大家参考,具体内容如下 第一步:安装vue-cli ...1.删除掉HelloWorld.vue 新建 olmap.vue组件 components/olmap.vue代码: &lt;div id=map

    Vue-Cli项目优化操作的实现

    在Vue-router官方文档中有针对懒加载的介绍,主要是将整个大的js进行切片,对当前路由的资源进行一个按需加载。在Vue-cli生成的路由组件引用方法是这样的 import HelloWorld from '@/components/HelloWorld' 只需将...

    vue.js视频教程及源码(一)

    第十五节:基于vue-cli搭建HelloWorld项目 第十六节:通过 Prop 实现父子组件数据传递 第十七节:父子组件方法传递及回调 第十八节:自定义事件实现父子组件交互 第十九节:消息订阅与发布组件Pubsub 第二十节:slot...

    vue.js视频教程及源码(二)

    第十五节:基于vue-cli搭建HelloWorld项目 第十六节:通过 Prop 实现父子组件数据传递 第十七节:父子组件方法传递及回调 第十八节:自定义事件实现父子组件交互 第十九节:消息订阅与发布组件Pubsub 第二十节:slot...

    Vue-Cli_install:直到安装Vue-Cli并输出Hello World

    专案1项目设置 yarn install编译和热重装以进行开发 yarn serve编译并最小化生产 yarn build整理和修复文件 yarn lint自定义配置请参阅。

    vue-cli-electron-sample

    Vue.js Hello World 应用程序由 Electron 包装。 项目设置 npm install 将应用程序编译为 Electron applocation npm run electron:serve 将电子应用程序构建到dist_electron文件夹 npm run electron:build 为...

    esbuild-vue:esbuild插件,用于加载和编译Vue 2单文件组件

    假设您有一个Component.vue和一个以某种方式使用它的main.js : # Component.vue &lt;h1&gt;Hello, World! # main.js import Component from './Component.vue'; import Vue from 'vue'; new Vue({ el: '#app', ...

    electron-build-hello-world:使用Vue.js和Electron构建Hello World桌面应用程序

    使用Vue.js和Electron构建Hello World桌面应用程序 安装vue cli npm install -g @vue/cli 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行测试 npm run test...

    vue实现页面切换滑动效果

    vue create hello-world 创建完毕后安装vue-router和vuex,现在vue-cli3支持图形化界面,可以直接在项目目录用ui启动,在管理页面点击安装 vue ui 然后建立这样一个项目结构 store.js 首先在vuex的仓库里存储页面...

    electronic-vue-spring:带有Web前端和Java后端的自以为是的桌面应用程序

    该项目有两个子项目: vue :一个Vue.js应用程序作为前端,基于使用Vue CLI 3创建的HelloWorld项目。您也可以将该项目替换为具有类似设计的React或Angular项目。 spring :一个Spring Boot应用程序作为后端,基于...

    material-vue-daterange-picker:日期范围选择器遵循由vue.js(alpha)支持的Material Design规范

    如果无法访问该文档,请打开一个,我会立即修复。 v-md日期范围选择器 DateRangePicker 图片 入门 安装 npm install v-md-date-range-picker --save # or use yarn yarn add v-md-date-range-picker 快速开始 您...

    vue_demo2.zip

    简单的一个HelloWorld例子,利用vue.cli初始化下载的项目,在通过自己手动写的一个HelloWorld,比较简单,就记录下自己所学

    hello-vuejs:Hasura快速入门Vue.js样板

    该项目利用vue-cli来构建带有Webpack模板,用于商店管理的vuex和用于路由管理的vue-router的Vue.js 2.0应用程序。 这是怎么回事? Vue.js Hello World项目 与包一起提供 热重装,每次保存时立即查看更改 使用商店...

    基于Vue+Webpack拆分路由文件实现管理

    当我们用 vue-cli 工具,创建一个新的 vue 项目时,就已经给大家新建好了一个路由文件 src/router/index.js ,内容如下: import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/...

    Vue单文件组件开发实现过程详解

    第一步:配置环境 安装cnpm ...安装@vue/cli cnpm install -g @vue/cli 检查版本是否正确 vue –version ...新建一个App.vue文件测试安装是否成功: &lt;template&gt;2 &lt;h1&gt;Hello world!&lt;/h1&gt;3 &lt;/template&gt;

Global site tag (gtag.js) - Google Analytics