安装使用VUE

如果是简单使用vue的话，可以直接引用js文件。

https://vuejs.org/js/vue.js

但是在构建大型项目的时候推荐使用NPM安装，NPM能够很好的和诸如webpack或Browserify模块打包器配合使用，同时Vue也提供配套工具来开发单文件组件。

1. 安装nodejs

由于npm（nodejs package manager）是nodejs的包管理器，所以要首先安装nodejs，从官网下载相应版本安装即可https://nodejs.org/en/download/。

安装好后打开命令行工具，输入node就进入nodejs的命令模式了：

C:\Users\wangjun>node
> 1+2
3
>

按两次Ctrl+C或者输入.exit就可以退出命令行了。

2. 安装淘宝NPM镜像

由于在国内npm的安装速度太慢，因此可以使用淘宝镜像及其命令cnpm来安装各种包。

安装npm淘宝镜像：

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

安装完成后，后面就可以使用cnpm命令来安装npm包了。

cnpm install {package name}

3. 安装VUE

# 安装稳定版
cnpm install vue

安装完成后默认在用户路径下：

C:\Users\{user_name}\node_modules

在vue包的dist/目录下可以看到Vue.js的各种版本，其中带min的是生产环境的版本，比开发版本vue.js压缩了很多，并且删除了警告。

4. 使用VUE

新建三个文件,其中vue.js需要从网上下载：

my.html
my.js
vue.js

4.1 新建my.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>my html</title>
</head>
<body>
	<div id="app">
		{{message}}
	</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="my.js"></script>
</html>

4.2 新建my.js

var app1 = new Vue({
	el: '#app',
	data: {
		message: 'Hello Vue!'
	}
})

至此vue的是安装和简单使用就完成了。

4.3 使用pnpm搭建vue项目

1. 初始化项目，过程中会输出项目名称和选择需要的组件
npm create vue@latest
2. 安装依赖
npm install
3. 运行项目
npm run dev

显示：
> vuetest@0.0.0 dev /Users/wangjun100/work/cursor/vueTest
> vite


  VITE v6.2.2  ready in 947 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

4.访问http://localhost:5173/ 有页面展示说明搭建成功。

4.4 遇到的问题

1）报错 Vue is not defined

Uncaught ReferenceError: Vue is not defined
    at my.js:1

原因

先引用了my.js，后引用了vue.js。

解决方案

应该先引用vue.js，后引用my.js才能在my.js中使用vue的语法。

2）报错[Vue warn]: Cannot find element: #app

[Vue warn]: Cannot find element: #app

原因

我把相关的js文件放在head里面，导致文件未加载完成就运行js文件，所以js找不到 #app 。

解决方案

把相关js文件放至尾部，保证页面全部渲染完成才加载js，就可以避免这个错误。

Previous前端学习 Next搭建VUE项目

Last updated 11 months ago

hashtag1. 安装nodejs

hashtag2. 安装淘宝NPM镜像

hashtag3. 安装VUE

hashtag4. 使用VUE

hashtag4.1 新建my.html

hashtag4.2 新建my.js

hashtag4.3 使用pnpm搭建vue项目

hashtag4.4 遇到的问题

hashtag1）报错 Vue is not defined

hashtag2）报错[Vue warn]: Cannot find element: #app