Vue2.x最简单的两个入门例子

最新推荐文章于 2024-07-24 12:54:56 发布

邵奈一

最新推荐文章于 2024-07-24 12:54:56 发布

阅读量2.5k

点赞数 1

分类专栏：前端全栈工程师文章标签： vue 前端全栈 js

本文链接：https://blog.csdn.net/shaock2018/article/details/86716062

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

全栈工程师

9 篇文章 2 订阅

订阅专栏

教程目录

0x00 教程内容
0x01 准备环境
- - - - 1. 安装nvm（node与npm）
      - 2. 安装vue-cli
0x02 vue-cli入门例子
0x03 vue简单入门例子
0xFF 总结

0x00 教程内容

准备环境
vue-cli入门例子
vue简单入门例子

0x01 准备环境

1. 安装nvm（node与npm）

a. 请参考教程：Node版本管理工具nvm的安装与使用（windows）
b. 按流程下载相对于版本的node即可，也会默认安装好对应版本的npm

2. 安装vue-cli

a. 查看当前node.js版本
node --version

b. 全局安装vue-cli（vue开发脚手架），i表示安装，-g表示全局
npm i -g vue-cli

安装指定版本，则如：
npm i -g vue-cli@x.x.x

PS：vue-cli 3.x版本之后使用以下方式：
npm i -g @vue/cli@4.1.2

c. 查看vue版本：
vue --version
在这里插入图片描述

0x02 vue-cli入门例子

1. 初始化vue-cli

a. 在想要创建项目的路径下右键，选择“Git Bash Here”（需安装Git软件），然后初始化vue-cli：
vue init webpack vue_sny
解释：
初始化一个基于webpack模板的项目，项目名为：vue_sny
在这里插入图片描述
b. 回车后会提示输入信息，括号里面的内容为默认的，回车则选中：

解释：

Project name (vue_sny)：项目名称，直接回车，选中括号中的默认名字（名字不能有大写字母，否则会报错）
Project description (A Vue.js project)：项目描述，可直接点击回车
Author ()：作者，直接回车
Runtime + Compiler: recommended for most users 官方推荐，选中
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere ：直接选推荐的
Install vue-router? (Y/n) ：是否安装vue-router为官方的路由，这里可选可选可不选，要用到的话就要选Y。
Use ESLint to lint your code? (Y/n) ：是否使用ESLint管理代码，ESLint是代码风格管理工具，是用来统一代码风格的，一般会使用，如果觉得黄色的警告很难看，可以关掉，也可以安装完成后在配置文件里关掉。
Pick an ESLint preset (Use arrow keys) ：选择一个ESLint预设，编写vue项目时的代码风格，直接Y回车
Setup unit tests with Karma + Mocha? (Y/n) ：是否安装单元测试，这里可选可选可不选，要用到的话就要选Y。
Setup e2e tests with Nightwatch(Y/n)? ：是否安装e2e测试 ，这里可选可选可不选，要用到的话就要选Y。

c. 大概需要两分钟，屏幕上会出现三行代码指引：

To get started:
  cd vue_sny
  npm run dev

意思是进入到当前路径下的vue_sny目录，然后执行用npm执行项目，我们并没有创建vue_sny目录，为自动创建的，可以自己去路径下看一看是否真的存在。

2. 启动vue-cli项目

a. 执行并启动上面两条指令，提示项目的启动端口：
http://localhost:8080
（可能会弹出提示，选“允许访问”）
在这里插入图片描述
b. 打开ip地址可看到启动的项目：

3. 项目结构介绍

a. 请参考官网，不同版本不一定相同
在这里插入图片描述

4. 简单配置介绍

a. 修改端口（vue_sny/config/index.js）

有时候我们后台项目也会默认使用8080端口，会跟我们前端端口冲突，所以我们可以修改端口成其他端口，打开浏览器时修改成其他端口访问即可，我这里使用8880。
ps：每次修改配置文件后要记得重新执行启动项目的指令才生效
npm run dev

5. 简单修改项目

a. 打开App.vue文件，将里面的内容删成：

<template>
	<div id="app">
		<pre>
			邵奈一: shaonaiyi@163.com 
			wechat：shaonaiyi888 
			csdn：https://blog.csdn.net/shaock2018
		</pre>
	</div>
</template>

<script>
	export default {
		name: 'App'
	}
</script>

<style>
</style>

b. 打开端口，可看到相关信息：
localhost:8880
在这里插入图片描述

0x03 vue简单入门例子

1. 新建html页面

a. 新建一个项目或者在电脑任何路径下新建一个html文件，并编辑内容，这是脱离了上面安装的环境的。
b. 这里使用CDN的方式（https://www.bootcdn.cn/）引入vue
<script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>

2. 编写代码

a. 编写csdn类，构建Vue类，绑定数据name
b. 完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
	</head>
	
	<body>
		<div class="csdn">
			{{name}}的技术博客CSDN:https://blog.csdn.net/shaock2018
		</div>
		<script>
			new Vue({
				el: '.csdn',
				data: {
					name: '邵奈一'
				}
			})
		</script>
	</body>
</html>