韩震博客|关注于学习java&php与交流

vue项目环境搭建

somnus 2018年12月03日 web前端 26 0

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


首先,确定你的电脑上已经安装了nodejs,可以使用npm包管理器安装环境,如果还没有安装node环境,可参考我的另外一篇博客中提到的关于node的安装步骤 初识react之react+webpack+es6环境配置步骤整理 ,这里就不多说了。


1) 打开cmd命令窗口,切换到你要新建项目的文件夹下,此时可使用node -v检查node的版本,如果出现版本号则node已安装。 

 

2) 使用以下命令全局安装vue-cli


npm install -g vue-cli 

或者使用国内的淘宝镜像 

npm install -g cnpm --registry=https://registry.npm.taobao.org


3)使用命令 vue init webpack vue-demo 搭建vue项目, “vue-demo” 是你的项目名称。




3) 配置需要安装的vue环境




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




5) 执行 npm run dev 命令,启动项目 

 

当出现下图时,说明项目启动成功! 

 

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



以上就是我搭建vue项目环境的全过程了。


二、 一个简单的不能再简单的vue例子


这里,我们在已经搭建好的vue项目中,实现一个从项目已有的Hello World! 跳转至我们自己创建的Hello Vue组件页面的例子。


1) 首先,在已经搭建好的环境的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: "啦啦啦啦啦"

      }

    }

  }

</script>


<style type="text/css">

  #vue{

    color: green;

    font-size: 28px;

  }

</style>


3) 在项目搭建时生成的HelloWorld.vue文件中的template中添加一个链接,用于跳转至我们自己的组件内容。 

关于 router-link 的使用,请参考 vue-router文档。


<h1>

 <router-link to="day01">跳转至HelloVue</router-link>

</h1>

1

2

3

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

 

注意:这里的mode: 'history' 作用参考vue-router文档。


5) 最后,我们刷新浏览器就可以看到效果了。 


原文:https://blog.csdn.net/qq_33036599/article/details/79656597 


总结:

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev


我是红色火线加油站,欢迎你的转载!http://hongsehuoxian.com
看到这里如果这篇文章真的帮到你了,不妨打赏一下哦!

以上就是红色火线JAVA加油站整理的关于vue项目环境搭建的文章,
希望可以帮到你,如果你有不同的见解可以留言指正哦,避免让别的java小伙伴在走挫折路。
ItelliJ IDEA 的三种破解方式
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信