Vue基础知识-（一）入门

本文最后更新于：May 13, 2023 pm

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

学校近期要搞一个用Vue做项目的班，而今天也是真的巧，看见了比较好的博客。就先学学吧，所以。

0.安装vue-cli

先确保有 node和npm。

在Mac系统的本地上安，安到了我想放弃。ε=(´ο｀*)))唉。最后终于找到了一个好的，记一下。

1
2
命令行输入：sudo npm install --global vue-cli
输入密码回车

然后会出现下面情况：（网图一张）

然后再输入命令：

1
export PATH="$PATH:/Users/panchenchen/.npm-global/bin/"

具体路径根据自己的进行更改，上面代码是针对上面的图。

而我在实际中，因意外发现了另一种方法。现在都附上：

1
2
3
4
5
6
7
8
# 1 意外 也成功了
export PATH=/usr/local/bin:/usr/local/bin/node_package/node_global/lib/node_modules/vue-cli/bin

# 2 正常
export PATH="$PATH:/usr/local/bin/node_package/node_global/lib/node_modules/vue-cli/bin"

# 3 这种是不可以，没想到吧。哈哈哈，我也没想到。
export PATH=/usr/local/bin/node_package/node_global/lib/node_modules/vue-cli/bin

执行完毕后，再执行vue或者vue -V 就可以看见版本号了。

0.1 本地运行项目

保证先安装 Node 环境，然后使用下载Node时自带的 npm (node 的包管理工具) 下载各种依赖，比如：vue-cli，安装 vue-cli后才能使用 vue 命令来初始化项目

  1. 全局安装vue的脚手架：vue-cli
    1
    npm install vue-cli -g
  2. 使用初始化 vue 项目: （使用 webpack模板搭建项目）
    1
    vue init webpack project-name
  3. 进入刚刚新建的项目文件：
    1
    cd project-name
  4. 安装vue项目所需要的依赖
    1
    npm install
  5. 运行启动项目：
    1
    npm run dev

自己实现（仅供参考）

先在一个文件夹下执行：

1
2
命令行输入：sudo npm install --global vue-cli
输入密码回车

再执行：

1
2
3
export PATH=/usr/local/bin:/usr/local/bin/node_package/node_global/lib/node_modules/vue-cli/bin

vue list

再依次执行：

1
2
3
4
5
npm install vue-cli -g
vue init webpack project-name
cd project-name
npm install
npm run dev

报错处理

  1. 在使用CSDN的codechina做仓库，用Hbuilder拉时报错，如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
➜  demoTest git:(master) npm run dev

> test@1.0.0 dev /Users/dragonone/Desktop/VueProject/demoTest
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

sh: webpack-dev-server: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! test@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the test@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /usr/local/bin/node_package/node_cache/_logs/2021-11-22T12_08_36_738Z-debug.log

解决办法：

1
2
npm uninstall webpack-dev-server
npm i webpack-dev-server@2.9.7
  1. 针对在上述安装vue-cli过程中可能出现的报错问题。报错信息借网上一用。其实都差不多。
1
2
3
4
5
6
7
8
9
10
npm ERR! code EEXIST
npm ERR! path D:\nodejs\node_globalnpm\node_modules\@vue\cli\bin\vue.js
npm ERR! dest D:\nodejs\node_globalnpm\vue
npm ERR! EEXIST: file already exists, cmd shim 'D:\nodejs\node_globalnpm\node_modules\@vue\cli\bin\vue.js' -> 'D:\nodejs\node_globalnpm\vue'
npm ERR! File exists: D:\nodejs\node_globalnpm\vue
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Program Files\nodejs\node_cache\_logs\2021-01-25T07_14_17_763Z-debug.log

原因在于：主要原因是安装vue的版本过低。

解决办法：

1
npm install -g @vue/cli --force

强制覆盖以前旧版本的vue-cli脚手架。

1.入门

不推荐使用CDN链接。建议自行下载Vue.js文件到本地。
Vue.js下载链接：https://cn.vuejs.org/v2/guide/installation.html
直接点击下载官方文件：开发版本 、生成版本 。

浏览器中的控制台：

1
2
Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools

这不是报错也不是警告，仅仅是告诉开发者下载它可以获得更好的开发体验。阻止Vue在启动时生成生产提示。

1
2
3
4
//非必需
<script type="text/javascript">
			Vue.config.productionTip = false
</script>

1.1 初体验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
	<div id="root">
		<h1>hello，tothefor</h1>
	</div>
	
		<script type="text/javascript">
			Vue.config.productionTip = false
			
			//创建vue示例
			const x = new Vue()
		</script>
	
	</body>
</html>

注意：Vue的开始是从创建的示例开始。而创建vue实例需要提供一个参数对象。用于指定当前Vue实例为哪个容器服务，其值通常是css选择器字符串，但也不是绝对的。

对象的写法有两种，第一种是常用的，但第二种也得知道。

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
			Vue.config.productionTip = false
			
			//创建vue示例
			const x = new Vue({ //第一种，推荐
				el:'#root' //用于指定当前Vue实例为哪个容器服务
			})
			
			const x = new Vue({ //第二种
				el:document.getElementById('root')
			})
		</script>

第一种相当于告诉名字目标让vue自己去找，第二种相当于我把目标找到了再给vue。当然了，肯定是第一种比较简单快捷些。这里演示的是id选择器的，class形式（类选择器）的同理变换即可。

这样，vue实例对象就和容器建立起了关系。但是建立关系后干嘛呢？肯定是要操作数据的嘛。还是先看代码，再解释。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="root">
	<h1>hello,{{name}}</h1> //区别
</div>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//创建vue示例
		const x = new Vue({
			el:document.getElementById('root'),
			data:{
				name:'loong'
			}
		})
	</script>

看了代码后，可以自行跑起来看看页面效果，这样比较好理解。现在解释一下。data中用于存储数据，而数据供对象所指定的容器使用。简单理解就是用来写数据的，其他地方直接使用名称即可。如上述代码”hello，”后面的是用两个{}包起来的name，取出name的值loong放在使用处。看完代码最好再看看页面效果，这样比较好理解。

再放一个例子，自行看效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <div id="root">
	<h1>hello,{{name}}</h1>
	<h2>年龄：{{age}}</h2>
</div>

<script type="text/javascript">
	Vue.config.productionTip = false
	
	//创建vue示例
	const x = new Vue({
		el:document.getElementById('root'),
		data:{
			name:'loong',
			age:23
		}
	})
</script>

还有一点说的就是，实践上那个x从头带尾都没有用过，所以可以不需要的，直接new。即：

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
	Vue.config.productionTip = false
	
	//创建vue示例
	new Vue({
		el:document.getElementById('root'),
		data:{
			name:'loong',
			age:23
		}
	})
</script>

1.2 总结

  1. 使用vue，就必须要创建一个Vue实例，并且要传入一个配置对象。
  2. 容器里面的代码依旧符合html规范，只不过加入了一些vue语法。
  3. 容器里的代码被称为Vue模板。
  4. 一个Vue不能同时接管两个容器（class的也不行），也不能两个Vue接管一个容器。他们之间的关系是一对一的。
  5. 两个大括号 { { xxxxx } } 中的xxxxx必须是js表达式（一个表达式会产生一个值，可以放在任何一个需要值的地方。而js代码或语句则不会）且xxxxx可以自动读取到data中的所有属性。

Vue项目运行命令的区别（临时：2021/11/28）

在运行一些 vue 项目的时候，输入npm run serve或者 npm run dev的其中一个时，系统会报错，类似如下：

1
2
3
4
5
6
PS C:\Users\LENOVO\Desktop> npm run dev
npm ERR! missing script: dev

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\LENOVO\AppData\Roaming\npm-cache\_logs\2020-05-27T01_05_59_189Z-debug.log
PS C:\Users\LENOVO\Desktop\website> npm run serve

所以，到底什么时候用npm run dev、什么时候用npm run serve。这其实都是同一个东西，只是名字换了一个而已。

打开 package.json 文件，观察这段代码：

1
2
3
4
5
"scripts": {
   "serve": "vue-cli-service serve",
   "build": "vue-cli-service build",
   "lint": "vue-cli-service lint"
 },

可以把这个 npm run serve 当做是 npm run package.json 里面的scripts的serve，而serve又表示vue-cli-service serve 。所以npm run serve 实际运行的是 vue-cli-service serve；而如果你想使用npm run dev 的话，只需把前面的 “serve” 修改为 “dev” 就行。如下：

1
2
3
4
5
"scripts": {
   "dev": "vue-cli-service serve",
   "build": "vue-cli-service build",
   "lint": "vue-cli-service lint"
 },

Vue3安装（2022/2/7）

今天再一次安装了vue3。

1
2
sudo chmod -R 777 /usr/local/lib/node_modules # 这句赋权好像没用
npm install -g @vue/cli

安装完毕后，出现：

1
2
3
/usr/local/bin/node_package/node_global/bin/vue -> /usr/local/bin/node_package/node_global/lib/node_modules/@vue/cli/bin/vue.js
+ @vue/cli@4.5.15
updated 1 package in 20.307s

此时输入 vue -V 还是不行。再输入：

1
export PATH="$PATH:/usr/local/bin/node_package/node_global/bin/"

这些就可以了用vue -V看版本信息了。注意后面的地址是上面报出来的。

其他操作(可有可无)

1
vim ~/.bash_profile

再将以下命令存入：

1
export PATH="$PATH:/usr/local/bin/node_package/node_global/bin/"

保存退出后，

1
source ~/.bash_profile
Vue
Vue

本文作者: 墨水记忆
本文链接: https://tothefor.com/DragonOne/601325128.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！