Vue：创建Vue项目Hello Vue！

作者:神秘网友 发布时间:2020-10-31 19:10:56

Vue：创建Vue项目Hello Vue！

Vue：创建Vue项目Hello Vue！

一，创建大型项目

傻瓜式安装。

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

node -v

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

在安装路径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"

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

在CMD中执行：

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

在CMD中执行：

cnpm install -g vue-cli

在CMD中执行：

cnpm install -g webpack

在CMD中执行：

vue init webpack

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

然后用webstorm打开项目，其结构如下：
Vue：创建Vue项目Hello Vue！

打开IDE终端，输入：

npm run dev

Vue：创建Vue项目Hello Vue！
访问http://localhost:8080。

到此为止，一个最小化vue项目就运行起来了，结果如下：
Vue：创建Vue项目Hello Vue！

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

这一步是不必要的。

之所以会有这一步，是因为我还有其他应用要使用8080端口，所以需要改变vue项目的运行端口为8000:
Vue：创建Vue项目Hello Vue！

创建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>

在src/router/index.js文件中新增4、10~14行的内容：
Vue：创建Vue项目Hello Vue！
访问http://localhost:8080/#/hello，结果如下：
Vue：创建Vue项目Hello Vue！

二，初学者做法

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

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

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

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

创建一个文件夹，将刚刚下载的vue.js放入其中，并创建一个index.html文件。结构如下：
Vue：创建Vue项目Hello Vue！

编辑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：创建Vue项目Hello Vue！

上面的那个例子够简单了吧，但好像也就是渲染模板的样子，接下来这个例子，却实实在在地展示了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>

效果如下：
Vue：创建Vue项目Hello Vue！

初学者可以从这个二次印象的内容开始学习Vue。

Vue：创建Vue项目Hello Vue！相关教程

  1. vue表格编辑弹出模态框，v-model绑定原有值，在点击关闭或取消编

    vue表格编辑弹出模态框，v-model绑定原有值，在点击关闭或取消编辑时仍然改变了原有的值 解决vue中采用v-model双向绑定数据时导致修改了数据后取消编辑，原有数据改变的问题 最近在使用vue，但是之前没有系统地学习过vue，所以都是一边看官方文档，面向百度搜

  2. springboot项目里面，关于jQuery的webjars依赖的导入，前端的引

    springboot项目里面，关于jQuery的webjars依赖的导入，前端的引入格式是什么 1 导入jQuery的webjars依赖 dependency groupIdorg.webjars/groupId artifactIdjquery/artifactId version3.5.0/version /dependency 2 前端的HTML里面导入jQuery script src=webja

  3. react+ts项目中使用jexcel，单元格合并

    react+ts项目中使用jexcel，单元格合并 遇到的问题 1.jexcel 的导入出问题 2.初始化jexcel表格dom节点的获取问题 3.jexcel初始化返回jexcel对象没有获取到的 4.在对代码进行更改后，热更新之后页面会出现多个表格 因为公司做的项目用到了jexcel,今天我的师傅

  4. springboot+vue项目配置https请求

    springboot+vue项目配置https请求 1、keytool生成证书 打开cmd，使用keytool生成证书，keytool是jdk中的一个证书管理工具，可以生成自签名证书 keytool -genkey -alias tomcat -keyalg RSA -keystore server.keystore （命令内容随便写，密码记住） 生成了对

  5. 黑马头条项目-day03

    黑马头条项目-day03 新建用户详情页面src/views/edit_profile.vue 9.1数据获取和个人中心是用一个接口 // 获取用户详情 // 接口类型:【GET】 // 需要验证:【Authorization 】 // 接口地址:/user/:id // xhr.setRequestHeader('Conent-Type','applicatio/x-www

  6. 如何使用 IntelliJ IDEA 构建父/子工程类型的Maven项目

    如何使用 IntelliJ IDEA 构建父/子工程类型的Maven项目 如何使用 IDEA 构建父/子工程类型的Maven项目 在一家公司里开发，很多项目中使用的jar包80%都是重复的，如果每个项目都要把pom.xml文件的这些依赖包复制过来，或是后期出现统一的版本升级，那修改起来是

  7. Linux——shell项目1(仿写bash)

    Linux——shell项目1(仿写bash) shell是一个程序，可以称之为壳程序，用于 用户与操作系统进行交互 。用来区别与核，相当于是一个命令解析器，Shell有很多中，这里列出其中几种 Bourne SHell(sh) Bourne Again SHell(bash) C SHell(csh) KornSHell(ksh) zsh

  8. SpringBoot、Vue前后端分离项目部署

    SpringBoot、Vue前后端分离项目部署 一.前端配置及打包部署 1.统一url前缀 2.打包 npm run build 将打好的文件甩到nginx下： 3.配置nginx server {listen 80 default_server;listen [::]:80 default_server;# Add index.php to the list if you are using PHP