Vue：创建Vue项目Hello Vue！

最新推荐文章于 2023-09-26 20:18:02 发布

dangfulin

最新推荐文章于 2023-09-26 20:18:02 发布

阅读量1.8k

点赞数 1

分类专栏： web前端文章标签： vue

本文链接：https://blog.csdn.net/dangfulin/article/details/109384823

版权

web前端专栏收录该内容

14 篇文章 4 订阅

订阅专栏

一，创建大型项目

1，安装nodejs。

傻瓜式安装。

2，安装检查。

打开CMD，进入安装目录，输入：

node -v

能查看到node的版本号，表示安装成功。

3，创建全局安装文件夹与缓存文件夹。

在安装路径D:\tools_software\nodejs下创建两个文件夹node_global与node_cache，并在CMD中执行以下两条命令：

npm config set prefix "D:\tools_software\nodejs\node_global"
npm config set cache "D:\tools_software\nodejs\node_cache"

4，配置环境变量。

创建系统环境变量：
NODE_PATH：D:\tools_software\nodejs\node_globa\node_modules
path中修改原来的nodejs安装路径为：D:\tools_software\nodejs\node_global

5，安装cnpm。

在CMD中执行：

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

6，安装vue脚手架。

在CMD中执行：

cnpm install -g vue-cli

7，安装webpack。

在CMD中执行：

cnpm install -g webpack

8，初始化项目。

在CMD中执行：

vue init webpack

会要求输入项目名称等解释性内容与是否安装一些东西（全选Yes就行）。

然后用webstorm打开项目，其结构如下：
在这里插入图片描述

9，运行项目。

打开IDE终端，输入：

npm run dev

在这里插入图片描述
访问http://localhost:8080。

到此为止，一个最小化vue项目就运行起来了，结果如下：
在这里插入图片描述

接下来会进行一些简单的编码，来输出“hello vue”。

10，修改配置

这一步是不必要的。

之所以会有这一步，是因为我还有其他应用要使用8080端口，所以需要改变vue项目的运行端口为8000:
在这里插入图片描述

11，创建一个新的component

创建src/components/hellovue.vue文件：

<template>
    <h1>Hello Vue!</h1>
</template>

<script>
export default {
  name: 'hellovue',
  data () {
    return { }
  }
}
</script>

<style scoped>
h1 {
  color: red;
  font-size: 20px;
}
</style>

12，新建一个路由

在src/router/index.js文件中新增4、10~14行的内容：
在这里插入图片描述
访问http://localhost:8080/#/hello，结果如下：

二，初学者做法

经过上面的一顿操作，会有人说：“这也太麻烦了吧！”

显而易见，上面的十来个步骤确实是有效的，虽然对老鸟来说确实简单，但对初学者不友好，Vue官方也建议新手不要直接上手CLI工具构建项目，应该先基于简单的文件结构来学习Vue。

好的，这里就来一个对新手友好的“Hello Vue!”

首先

下载vue.js，选择开发版本。

然后

创建一个文件夹，将刚刚下载的vue.js放入其中，并创建一个index.html文件。结构如下：
在这里插入图片描述

最后

编辑index.html文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>		
		<style type="text/css">
		#app {
		  color: red;
		  font-size: 20px;
		}
		</style>
	</head>
	<body>
		<h1 id="app">
		  {{ message }}
		</h1>
		
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>

		<script>
			var app = new Vue({
			  el: '#app',
			  data: {
			    message: 'Hello Vue! 我来自变量message'
			  }
			})
		</script>
	</body>
</html>

效果是一样的：
在这里插入图片描述

三，初学者的二次印象

上面的那个例子够简单了吧，但好像也就是渲染模板的样子，接下来这个例子，却实实在在地展示了Vue最核心的功能：数据的双向绑定。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>

		<style type="text/css">
			#app {
				color: red;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
        <div id="app">
            <label>
                <input type="text" v-model="name" placeholder="your name">
            </label>
            <h1>Hello {{ name }}!</h1>
        </div>

        <script src="vue.js" type="text/javascript" charset="UTF-8"></script>

        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    name: ''
                }
            })
        </script>
    </body>
</html>