页面引入方式

引入方式

如果在页面使用vue，可以在页面引入vue.js文件直接使用：如下

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

安装vue页面预览工具

html文件使用这种页面引入vue的方式进行开发，需要对页面进行预览看效果就可以安装如下三个包，安装包后可以点击Open with Live Server 对页面浏览

Live Preview Server包

或者

Live Server包

或者

Live Perview包

Live server是有环境依赖的，它依赖Node环境，建议都这三个都可以安装上，然后就可以在vs code中右键点击Open with Live Server浏览页面了

我们还可以在页面F12控制台中通过Vue.Version命令查看vue版本，通过Vue命令查看Vue属性信息

Vue项目使用方式

安装脚本工具

第一步：安装node.js   

URL地址： 下载 | Node.js

安装完毕后查看版本号， node-v  出现版本号及表示安装成功，也可以查看npm版本  npm -v

NPM 的全称是 Node Package Manager，即 Node 包管理工具，那么 Node 又是什么？即指 Node.js，Node.js 是一个能够在服务器端运行 JavaScript 的开放源代码、跨平台 JavaScript 运行环境，新版的Node.js自带npm命令。所以安装了Node.js后就直接可以使用npm命令了

#查看node版本号
node -v

#查看npm版本号
npm -v

#更新npm
npm update -g

第二步：node 切换到淘宝镜像

2024年1 月 22 日，淘宝原镜像域名（registry.npm.taobao.org）
的 HTTPS 证书正式到期。如果想要继续使用，需要将 npm 源切换到新的源（registry.npmmirror.com），否则会报错。

最新的淘宝镜像：
npm config set registry https://registry.npmmirror.com

检查是否切换成功

npm config get registry

如果想用回国外的源，再切换回来就可以 

npm config set registry https://registry.npmjs.org/

第三部：安装yarn：yarn是Facebook发布的一款npm包管理工具

安装yarn的前提是需要先安装好npm，且环境变量都配置好了，才可以使用。

npm install yarn -g

#安装完毕后检查版本
yarn --version
或者
yarn -v

Yarn切换到淘宝镜像

#切换到淘宝镜像地址
yarn config set registry https://registry.npmmirror.com/
yarn config set disturl https://npmmirror.com/dist
yarn config set electron_mirror https://npmmirror.com/mirrors/electron/
yarn config set sass-binary-site https://npmmirror.com/mirrors/node-sass/

#官方镜像地址： 
https://registry.yarnpkg.com


#检查镜像源
yarn config get registry
yarn config get sass_binary_site


#清理缓存
yarn cache clean

#强制清理缓存
npm cache clean -f

Yarn常用脚本命令

yarn init // 生成package.json文件
yarn install // 安装yarn.lock的所有依赖
yarn install --force // 重新安装依赖
yarn remove moduleName // 删除依赖
yarn add moduleName // 安装某个依赖
yarn add moduleName --dev/-D // 安装到开发环境
yarn run scriptName // 执行package.json命名的脚本命令


# 安装yarn 
npm install -g yarn


# 安装成功后，查看版本号： 
yarn --version


# 创建文件夹 yarn 
md yarn


# 进入 yarn 文件夹 
cd yarn


# 初始化项目 
yarn init     # 同npm init，执行输入信息后，会生成package.json文件


# yarn的配置项： 
yarn config list     # 显示所有配置项
yarn config get <key>    # 显示某配置项
yarn config delete <key>     # 删除某配置项
yarn config set <key> <value> [-g|--global]     # 设置配置项

yarn config get registry  # 查看yarn当前镜像源
yarn config set registry https://registry.npm.taobao.org/  # 设置yarn镜像源为淘宝镜像


# 安装包
yarn install     # 安装package.json里所有包，并将包及它的所有依赖项保存进yarn.lock
yarn install --flat      # 安装一个包的单一版本
yarn install --force     # 强制重新下载所有包
yarn install --production      # 只安装dependencies里的包
yarn install --no-lockfile      # 不读取或生成yarn.lock
yarn install --pure-lockfile   # 不生成yarn.lock


# 添加包（会更新 package.json 和 yarn.lock）：
yarn add [package]     # 在当前的项目中添加一个依赖包，会自动更新到package.json和yarn.lock文件中
yarn add [package]@[version]     # 安装指定版本，这里指的是主要版本，如果需要精确到小版本，使用-E参数
yarn add [package]@[tag]     # 安装某个tag（比如beta,next或者latest）

	# 不指定依赖类型默认安装到dependencies里，你也可以指定依赖类型：
	yarn add --dev/-D    # 加到 devDependencies
	yarn add --peer/-P    # 加到 peerDependencies
	yarn add --optional/-O    # 加到 optionalDependencies

	# 默认安装包的主要版本里的最新版本，下面两个命令可以指定版本：
	yarn add --exact/-E    # 安装包的精确版本。例如yarn add foo@1.2.3会接受1.9.1版，但是yarn add foo@1.2.3 --exact只会接受1.2.3版
	yarn add --tilde/-T    # 安装包的次要版本里的最新版。例如yarn add foo@1.2.3 --tilde会接受1.2.9，但不接受1.3.0


# 发布包
yarn publish


# 移除一个包 
yarn remove <packageName>    # 移除一个包，会自动更新package.json和yarn.lock


# 更新一个依赖 
yarn upgrade     # 用于更新包到基于规范范围的最新版本


# 运行脚本 
yarn run     # 用来执行在 package.json 中 scripts 属性下定义的脚本


# 显示某个包的信息 
yarn info <packageName>     # 可以用来查看某个模块的最新版本信息


# 缓存 
yarn cache 
yarn cache list   # 列出已缓存的每个包 
yarn cache dir    # 返回 全局缓存位置 
yarn cache clean   # 清除缓存

第四步：安装cnpm

#安装cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

#设置为淘宝镜像：

npm config set registry https://registry.npmmirror.com

#查看版本号

cnpm -v

第五步：安装vue客户端

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

卸载vue客户端命令：
#3.0之前版本的卸载
npm uninstall vue-cli -g 
#3.0之后的版本卸载
npm uninstall -g @vue/cli

#或者

yarn global remove vue-cli

Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

安装vue客户端命令：
npm install -g @vue/cli

#或者

yarn global add @vue/cli

#或者
cnpm install -g @vue/cli

安装完毕后查看版本vue版本号

vue -V

有些时候由于网络问题导致下载失败，再次重新下载后会有一个错误的json报错，这个是因为你上一次下载的时候的缓存问题，我们只需要清楚npm缓存就好了，

清除npm缓存

npm cache clean --force

如需升级全局的 Vue CLI 包，请运行：

#对于使用Vue进行开发的Web应用程序来说，Vue CLI是一个非常重要的工具，它可以帮助我们更快地搭建Vue项目，并且带来了一系列的开发
#工具和实用程序。但是，经常使用的Vue CLI版本可能会过时，因此需要使用npm update来更新Vue CLI的版本。需要注意的是，
#这里的“-g”选项表示安装全局模块，也就是说，这个命令将会更新全局的Vue CLI版本。如果您在项目中使用了特定版本的Vue CLI，
#那么需要在项目中使用“npm update vue-cli”命令来更新该特定版本。
#在运行以上命令后，npm会自动检查最新的Vue CLI版本，并进行更新。这个过程可能需要一些时间，取决于您的Internet速度和安装的Vue CLI版本。
#当npm完成更新后，您将会看到命令行中输出的新版本号，表示Vue CLI已经成功更新
 
首先需要打开终端或命令提示符窗口，在命令行中输入以下命令：
npm update -g @vue/cli
 
#如果你想升级你的项目到最新版本的Vue CLI，需要使用以下命令：
#此命令将会更新项目中的所有依赖库，并尝试自动解决冲突，以确保更新的顺利完成。然而，在执行此命令之前，建议您备份项目文件，
#以防更新过程中出现意外情况。
#需要注意的是，如果Vue CLI的更新涉及改变配置文件，那么您可能需要手动修改这些配置文件，以确保您的Web应用程序能够正常工作。
#因此，在更新Vue CLI之后，建议您再次测试您的Web应用程序，确保一切都正常。
#使用npm update命令更新Vue CLI是维护Vue应用程序的一个重要步骤。如果您经常使用Vue CLI，高度建议您始终将其保持最新，以获得更好的性能和更好的开发体验
 
npm update

#或者用yarn命令
 
yarn global upgrade --latest @vue/cli

VueCli创建项目

创建项目命令

打开cmd命令：

//进入D盘
C:\Users\Fanbin>D:

//用CD命令切换到 vue学习目录下
D:\>cd vue学习

//用vue命令创建一个名字为myproject项目
D:\vue学习>vue create myproject

//执行完毕后则出现如下信息
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)  //光标停留在这里点击回车确认，创建vue3项目(默认配置)
  Default ([Vue 2] babel, eslint)
  Manually select features //光标停留在这里点击回车确认，则是手动创建vue项目（手动配置）

//如果选则Manually select features(手动配置)则会弹出如下让你选择
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel  --转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。【推荐选择】
 ( ) TypeScript  --TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，初学者不建议选择
 ( ) Progressive Web App (PWA) Support  --渐进式Web应用程序
 (*) Router  --路由组件（建议选中）
 (*) Vuex    --状态组件（建议选中）
 (*) CSS Pre-processors   --样式管理（建议选中）
 ( ) Linter / Formatter  --（代码风格检查和格式化：默认选中）（个人不推荐选中 稍有错误就会提示错误，例如换行等等都会提示错误，影响开发速度）
 ( ) Unit Testing  --单元测试（unit tests）
 ( ) E2E Testing   --端到端 （End-to-End）测试


//项目创建完毕后执行cd命令切换到刚刚创建的项目文件夹下
D:\vue学习\myproject>

//使用npm命令或者yarn命令启动项目
D:\vue学习\myproject>npm run serve
或者
D:\vue学习\myproject> npm run serve -- --port 8080 这里是手动指定项目的端口
或者
D:\vue学习\myproject>yarn serve 
或者
D:\vue学习\myproject>yarn serve -- --port 8080 这里是手动指定项目的端口

//执行完毕后则出现如下信息
App running at:
- Local:   http://localhost:8080/
- Network: http://10.105.21.92:8080/

Note that the development build is not optimized.
To create a production build, run yarn build.

//复制上面链接信息即可打开myproject项目

启动项目:指定临时端口，或者配置永久端口

在vue.config.js中添加

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true, // 是否将所有文件都编译一遍（通过 babel 编译文件：ES6+ → ES5）
	//更改默认端口
    devServer: {
        open: false, //自动打开浏览器
        port: 8081,  //指定端口号
    },   
    lintOnSave: false //设置是否在开发环境下每次保存代码时都启用 eslint验证
})

Vite创建项目

Vite简介

Vite 是一种新型前端构建工具，能够显著提升前端开发体验。
它主要由两部分组成：

创建项目命令

第一步骤
npm create vue@latest

#或者

$ yarn create vite

#或者

$ pnpm create vite
第二步骤：用npm命令的方式来创建项目

第二步骤：用yarn命令的方式来创建项目（这两个第二步骤选择一个就行）
提示录入项目名称
E:\vue学习\wowo4>yarn create vite
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@4.4.1" with binaries:
      - create-vite
      - cva
? Project name: » vite-project     #这里我们输入y表示创建项目

执行录入名称
E:\vue学习\wowo4>yarn create vite
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@4.4.1" with binaries:
      - create-vite
      - cva
? Project name: » zkhk       #这里输入你的项目名称:zkhk就是我的项目名称

第三步骤
E:\vue学习\wowo4>yarn create vite
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@4.4.1" with binaries:
      - create-vite
      - cva
√ Project name: ... zkhk
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue         #这里用方向箭头↓调整到Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

第四步骤

第五步骤
提示要执行的命令：
执行命令：

项目启动命令

npm run dev        这个命令前提是你需要安装node.js

或者

yarn dev               这个命令前提是你需要安装yarn ：全局安装：npm install yarn -g

或者

pnpm dev             这个命令前提是你需要安装pnpm：全局安装：npm install pnpm -g

第六步骤 

在浏览器中输入：http://localhost:5173/

 

 Vue项目:下载依赖包

当我们从其他地方下载别人的vue项目，发现没有依赖包，我们可以执行npm install命令安装依赖包

npm install

启动项目：

定义在package.json里面的脚本，就称为 npm 脚本

去package.json查看scripts节点下的服务器配置：

用Vue Cli创建的项目package.json文件：

用Vite创建的项目的package.json文件：

项目打包：

执行项目打包命令：

npm run build 

# vue.js # npm # 前端
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

35岁程序员危机：科技行业快速变化，如何应对年轻竞争者的挑战？

avatar 2048 AI社区

手写 Tomcat

使用 Socket 简单实现ResponseHttpServer03 动态 Response : 按照规范构造返回流04 各司其职的 Server : 拆分响应模块与处理模块#mermaid-svg-2INa1N7vV9JzTK1K {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mer

avatar 2048 AI社区
cover

收藏必备：LangChain RAG系统实战：解决大模型幻觉与知识断层，零基础也能上手

avatar 2048 AI社区