搭建vue项目环境以及创建一个简单的vue的demo

一、vue-cli脚手架的搭建步骤

1.首先，确定你的电脑上已经安装了nodejs，可以使用npm包管理器安装环境，如果还没有安装node环境，则需要安装node.js 这个很简单默认点击安装完成即可这里不不做演示了

2.创建一个项目存放的文件夹目录，然后进入到该目录下按Shift+鼠标右键点击在此打开PowerShell窗口，此时可使用node -v检查node的版本，如果出现版本号则node已安装，如下图：

3.使用以下命令全局安装vue-cli 首先输入命令：npm install -g vue-cli（或者使用国内的淘宝镜像命令为npm install -g cnpm --registry=https://registry.npm.taobao.org）如下图：

4.使用命令 vue init webpack vue-demo 搭建vue项目, “vue-demo” 是你的项目名称如下：

5. 以上步骤完成之后，项目目录结构如下图所示，其中的src目录下的文件，就是我们自己需要使用到的文件了如下图：

6.为了方便，我用java后端开发工具idea打开刚才创建的vue-demo项目（前端一般用的IDE为webstorm和vscode,建议还是用前端专业的IDE）然后执行 npm run dev 命令，启动项目如下图：

7.当出现下图时，说明项目启动成功！如下图：

8.这时我们可以通过浏览器访问链接 http://localhost:8080 来访问项目了。这时页面如下图：

二、创建一个简单的vue例子

1.这里，我们在已经搭建好的vue项目中，实现一个从项目已有的Hello World! 跳转至我们自己创建的Hello Vue组件页面的例子，首先，在已经搭建好的环境的components下新建一个vue文件，作为我们自己的vue组件如下图：

2.然后在HelloVue.vue文件中添加以下代码，vue文件的格式分为三个模块，如下图所示，首先时template模板，然后是script标签及代码，最后是style样式代码如下：

<template><div id="vue">Hello Vue.js! {{ message }}</div>
</template><script type="text/javascript">export default { //这里需要将模块引出，可在其他地方使用name: "HelloVue",data (){ //注意：data即使不需要传数据，也必须return,否则会报错return {message: "Hello vue"}}}
</script><style type="text/css">#vue{color: green;font-size: 28px;}
</style>

3.在项目搭建时生成的HelloWorld.vue文件中的template中添加一个链接，用于跳转至我们自己的组件内容。
关于 router-link 的使用，请参考 vue-router文档代码如下：

<template><div class="hello"><h1>{{ msg }}</h1><h2>Essential Links</h2><ul><li><ahref="https://vuejs.org"target="_blank">Core Docs</a></li><li><ahref="https://forum.vuejs.org"target="_blank">Forum</a></li><li><ahref="https://chat.vuejs.org"target="_blank">Community Chat</a></li><li><ahref="https://twitter.com/vuejs"target="_blank">Twitter</a></li><br><li><ahref="http://vuejs-templates.github.io/webpack/"target="_blank">Docs for This Template</a></li></ul><h2>Ecosystem</h2><ul><li><ahref="http://router.vuejs.org/"target="_blank">vue-router</a></li><li><ahref="http://vuex.vuejs.org/"target="_blank">vuex</a></li><li><ahref="http://vue-loader.vuejs.org/"target="_blank">vue-loader</a></li><li><ahref="https://github.com/vuejs/awesome-vue"target="_blank">awesome-vue</a></li></ul><h1><router-link to="/HelloVue">跳转至HelloVue</router-link></h1></div>
</template><script>
export default {name: 'HelloWorld',data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {font-weight: normal;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

4.接着，我们修改项目中的router目录下的index.js文件，这是一个vue-router的简单应用。对于路由，我们一般会想到宽带安装时我们使用的路由器，这里的路由主要是为了定义页面之前的跳转。在router下的index.js文件中添加以下代码：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HelloVue from '@/components/HelloVue'Vue.use(Router)export default new Router({mode: 'history',routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/HelloVue',name: 'HelloVue',component: HelloVue}]
})

5.最后，我们刷新浏览器就可以看到效果了如下图：

6.以上就实现了一个简单的页面跳转了第一次开始学习vue 欢迎大家相互学习交流！

搭建vue项目环境以及创建一个简单的vue的demo相关推荐

搭建Vue.js环境，建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...
使用vscode创建一个简单的vue项目
1.Node.js 官网下载地址 Node.js 下载 Node.js安装完后可以打开cmd输入下面两个命令查看是否安装成功(npm是同时安装的) node -v npm -v 2.VScode官网下 ...
从零开始搭建游戏服务器第一节创建一个简单的服务器架构
目录引言技术选型正文创建基础架构 IDEA创建项目添加Netty监听端口编写客户端进行测试总结引言由于现在java web太卷了,所以各位同行可以考虑换一个赛道,做游戏还是很开心的. ...
搭建一个简单Django+vue 项目
简介: Django是python的web开发框架,采用了MTV的框架模式,即模型Model,视图View和模版Template. 各自的职责为: 模型(Model),即数据存取层:如何存取.如何验证 ...
小灰灰的APP学习之路（三）--创建一个简单的问答选择项目
创建一个简单的问答选择项目简介这是一个简单的问答选择项目,界面上显示问题,然后点击"正确"或"错误"按钮,系统给出是否回答正确的提示. 例如: 问题:1+1 ...
vue.js — 安装Webpake创建一个完整的项目并上传至码云
vue.js - 安装Webpake创建一个完整的项目并上传至码云今天总结一下之前几天学习的一整套的创建项目方法: 前提条件:已安装node.js.npm/cnpm最新版本.vue-cli. VS ...
创建一个简单的springboot项目demo
springboot的核心功能: 1:起步依赖 2:核心注入; 创建一个简单的springboot项目demo步骤: 1:创建一个maven项目 2:pom.xml添加起步依赖 <parent& ...
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址问题描述:vue项目打包上线之后,如果要改服务器api地址,只能在源码更改然后重新打包发布,为了解决这个问题,我们可以在static增 ...
Vue第七章：项目环境配置及单文件组件 vue脚手
第七章:项目环境配置及单文件组件 vue脚手架回顾: 组件之间的通信父传子:正向传递 vue允许自动触发 props 1.先在子组件中定义期待的属性名和类型 2.在父组件中调用子组件 ...

搭建vue项目环境以及创建一个简单的vue的demo

搭建vue项目环境以及创建一个简单的vue的demo相关推荐

最新文章

热门文章