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

 

教程目录

 

0x00 教程内容
  1. 准备环境
  2. vue-cli入门例子
  3. 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
Vue2.x最简单的两个入门例子

0x02 vue-cli入门例子
1. 初始化vue-cli

a. 在想要创建项目的路径下右键,选择“Git Bash Here”(需安装Git软件),然后初始化vue-cli
vue init webpack vue_sny
解释:
初始化一个基于webpack模板的项目,项目名为:vue_sny
Vue2.x最简单的两个入门例子
b. 回车后会提示输入信息,括号里面的内容为默认的,回车则选中:
Vue2.x最简单的两个入门例子
解释:

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
(可能会弹出提示,选“允许访问”)
Vue2.x最简单的两个入门例子
b. 打开ip地址可看到启动的项目:
Vue2.x最简单的两个入门例子

3. 项目结构介绍

a. 请参考官网,不同版本不一定相同
Vue2.x最简单的两个入门例子

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
Vue2.x最简单的两个入门例子

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>
3. 预览结果

a. 以浏览器方式打开,可看到{{name}},其实是输入了shaonaiyi
Vue2.x最简单的两个入门例子

0xFF 总结
  1. 本教程主要介绍两个例子,通过对比学习,更有利于学习,其实我们vue-cli例子只是第二个例子的复杂实现而已。
  2. 重要的还是环境要搭建起来,虽然我们也可以使用cdn引入vue,但项目开发过程中,环境可让人事半功倍。
  3. 可以在config/index.js里把useEslint:设置为false,看着黄黄的警告信息不开心哈哈。
  4. 可以在谷歌浏览器里面安装Vue Devtools插件,这样子开发界面时保存会立即刷新,不用手动刷新,加快开发效率。

问题:打包后无法在项目里面预览
解决:修改打包后的路径(vue_sny/config/index.js)
assetsPublicPath: '/',
将‘/’前加个点:
assetsPublicPath: './',

  • 如果不修改,打包后,外部引入的 js 和 css在本地无法打开的,因为路径没有映射上。当然,如果将打包后路径放到服务器上是没有问题的。
  • ps:请注意!!!本教程不修改,而是打包的时候再改!!!

作者简介:邵奈一
全栈工程师、大学市场洞察者、专栏编辑
公众号、微博、CSDN邵奈一
本系列课均为本人:邵奈一原创,如转载请标明出处

 

上一篇:vue2和vue3 过滤器 变化


下一篇:【vue】vue2.x系列(二)之过渡&动画