vue项目环境搭建及一个简单的vue例子

女爷i 2022-05-29 11:15 215阅读 0赞

大家好，今天下午对于vue项目环境的搭建进行了研究，一直以来，我都是用cdn的方式将vue.js引入Html界面，然后就开始刷vue的官方文档了。在刷过文档之后，我就想着，真实的项目是怎么样子的呢，然后就开始了vue-cli脚手架的搭建和使用，下面是我搭建环境的步骤以及我自己初步使用vue-router实现的一个简单的不能再简单的例子。注意，文中的例子适合对vue已经有一定的了解，对vue组件化概念并且对es6有了解的朋友们。

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

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

1） 打开cmd命令窗口，切换到你要新建项目的文件夹下，此时可使用`node -v`检查node的版本，如果出现版本号则node已安装。  
![这里写图片描述][70]  
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” 是你的项目名称。

![这里写图片描述][70 1]

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

![这里写图片描述][70 2]

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

![这里写图片描述][70 3]

5） 执行 `npm run dev` 命令，启动项目  
![这里写图片描述][70 4]  
当出现下图时，说明项目启动成功！  
![这里写图片描述][70 5]  
这时我们可以通过浏览器访问链接 `http://localhost:8080` 来访问项目了。这时页面如下图：  
![这里写图片描述][70 6]

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

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

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

1） 首先，在已经搭建好的环境的components下新建一个vue文件，作为我们自己的vue组件。  
![这里写图片描述][70 7]  
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文档][vue-router]。

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

4）接着，我们修改项目中的router目录下的index.js文件，这是一个vue-router的简单应用。对于路由，我们一般会想到宽带安装时我们使用的路由器，这里的路由主要是为了定义页面之前的跳转。在router下的index.js文件中添加以下代码：  
![这里写图片描述][70 8]  
注意：这里的`mode: 'history'` 作用参考[vue-router文档][vue-router 1]。

5) 最后，我们刷新浏览器就可以看到效果了。  
![HelloWorld][]

![HelloVue][]

最后，感谢为鑫小姐姐的指导与支持，也希望对像我一样想要学习vue的小伙伴有帮助，如有问题，可以一起交流讨论，谢谢大家！

[react_react_webpack_es6_]: http://blog.csdn.net/qq_33036599/article/details/75666058
[70]: /images/20220529/ad57c301f8014f98ae9a3101cface4d6.png
[70 1]: /images/20220529/a303755ffd7f4f0bbba36b623dd59132.png
[70 2]: /images/20220529/680f1195478f485babbd5f1b25c9cf43.png
[70 3]: /images/20220529/9083340e0fcd4ca88a87f21cf6014d84.png
[70 4]: /images/20220529/30777dc9e87a4508ac65899e0179cd3c.png
[70 5]: /images/20220529/7be0903269d64b53ae57064a8e15427d.png
[70 6]: /images/20220529/612328f0ff6f40f08155dd9dcc59a985.png
[70 7]: /images/20220529/d98cc1e40e2a40e58f07a144aefd22cf.png
[vue-router]: https://router.vuejs.org/zh-cn/api/router-link.html
[70 8]: /images/20220529/7b02f86694c24f43b2cd33f881b36575.png
[vue-router 1]: https://router.vuejs.org/zh-cn/essentials/history-mode.html
[HelloWorld]: /images/20220529/469c0108f6dc4f3993bb9dfc4cf4f07e.png
[HelloVue]: /images/20220529/57083d05e99042cf958e799cf00fe3fe.png