`
hereson
  • 浏览: 1449291 次
  • 性别: 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 CLI 是 Vue.js 官方提供的一款强大的命令行工具,用于快速搭建 Vue.js 项目。它简化了项目初始化、配置和构建过程,使得开发者能够更专注于应用的业务逻辑。在这个"HelloWorld"案例中,我们将逐步了解如何使用 ...

    用Vue-cli快速构建web前端项目

    通过上述介绍可以看出,Vue-cli为前端开发者提供了一个高效便捷的开发平台。它不仅简化了项目的搭建流程,还集成了先进的开发工具和技术,使得开发者能够更加专注于业务逻辑的实现,从而提高整体的开发效率。无论是...

    利用vue-cli搭建vue+typescript+webpack4.x项目,附详细步骤.zip

    Vue CLI是一个官方提供的强大工具,它简化了Vue应用的初始设置,允许开发者快速启动项目并专注于实际的编码工作。TypeScript是JavaScript的一个超集,提供了静态类型检查和更强大的语法特性,而Webpack则是一个模块...

    一Vue-cli介绍和安装.pdf

    其中src文件夹下的components文件夹用于存放Vue组件文件,第一个Vue组件通常是一个HelloWorld.vue文件,它定义了默认的欢迎页面。 综上所述,Vue-cli的介绍和安装涉及了多个知识点:Vue.js框架的基本概念、Node.js...

    vue cli3 模板 没有ts

    Vue CLI 3 是一个强大的命令行工具,用于快速搭建 Vue.js 项目。它极大地简化了 Vue.js 应用程序的初始设置,提供了丰富的配置选项和自动化工作流。然而,有些用户在创建新项目时可能会发现默认模板并没有集成 ...

    用vuecli3搭建的vue项目脚手架

    VueCLI3是Vue.js官方提供的一个快速搭建复杂前端应用的脚手架工具,它极大地简化了Vue项目的初始化过程,提供了丰富的预设和插件机制,让开发者能够专注于编写业务代码而不是配置环境。在这个名为"vue-vuex-router-...

    Vue3版本HelloWorld

    总的来说,Vue3版本的HelloWorld项目是一个理想的起点,用于理解和实践Vue3的新特性,包括Composition API、优化的响应式系统、Teleport和Suspense组件等。通过这个项目,开发者可以深入学习Vue3的现代前端开发方式...

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

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

    使用VueCLI3构建的示例组件库

    VueCLI3是Vue.js官方提供的一个快速脚手架工具,用于简化项目初始化、配置和构建流程。本示例组件库的创建,展示了如何利用VueCLI3来开发和组织可复用的Vue组件,这对于提高开发效率和代码复用性至关重要。 在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-cli工程与Cesium的整合操作步骤

    Vue-cli 是一个基于 Vue.js 的命令行工具,用于快速搭建 Vue 项目,它提供了一套脚手架,简化了项目的初始化工作,包括设置Webpack配置、安装依赖等。Vue-cli 提供了一个灵活的构建系统,方便开发者自定义项目结构和...

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

    在本文中,我们将深入探讨如何安装 Vue CLI 并通过它创建并运行一个简单的 "Hello World" 项目。 首先,确保您的计算机上已经安装了 Node.js 和 npm(Node 包管理器),因为 Vue CLI 是基于 Node.js 的。您可以访问...

    vue-cli3+typescript初体验小结

    首先,Vue-cli3是Vue.js官方提供的一个快速搭建Vue.js项目脚手架工具。它对新手友好,对有经验的开发者也提供了丰富的定制选项。Vue-cli3的安装方法十分简单,通过npm安装命令安装。安装完成后,通过检查版本号确认...

    搭建一个vue项目

    首先,创建Vue项目通常会借助官方提供的`Vue CLI`(命令行工具)。通过全局安装Vue CLI: ```bash npm install -g @vue/cli ``` 然后,你可以创建一个新的Vue项目: ```bash vue create myfirst_vue ``` 这里`my...

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

    在Vue-Cli项目中,原本的组件引用方式是`import HelloWorld from '@/components/HelloWorld'`,现在可以改写为`const HelloWorld = () =&gt; import('@/components/HelloWorld')`。这样,只有当用户导航到包含该组件的...

    前端vue框架中的知识点-vue-router跳转页面实例(适合初学者)

    这里我们定义了两个路由,一个根路径`/`对应`HelloWorld`组件,另一个`/about`对应`About.vue`组件。`import()`语法用于动态加载组件,可以提高应用性能。 在`src/main.js`文件中,导入并挂载Vue Router到Vue实例:...

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

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

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

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

    windows下vue-cli导入bootstrap样式

    安装完成后,创建一个新的Vue CLI项目: ``` vue create my-bootstrap-project ``` 进入项目目录: ``` cd my-bootstrap-project ``` 2. **安装Bootstrap和jQuery**: Bootstrap 4需要jQuery来运行某些...

Global site tag (gtag.js) - Google Analytics