vuejs3怎么安装？NPM方法安装vuejs3.0

2022-09-1719:54:42WEB前端开发Comments1,075 views字数 1733阅读模式

vuejs3怎么安装？NPM方法安装vuejs3.0文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

操作环境：windows7系统、vuejs3版，DELL G3电脑。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

怎么安装vuejs3？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

Vue3 安装文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

1、独立版本文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

我们可以在 Vue.js 的官网上直接下载最新版本, 并用 <script> 标签引入。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

下载 Vue.js：https://unpkg.com/vue@3.2.7/dist/vue.global.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

2、使用 CDN 方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/3.0.5/vue.global.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

unpkg：https://unpkg.com/vue@next, 会保持和 npm 发布的最新的版本一致。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

Staticfile CDN（国内）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

3文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

<div id="app">文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

  <p>{{ message }}</p>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

</div>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

unpkg（推荐）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

3文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

<div id="app">文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

  <p>{{ message }}</p>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

</div>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

cdnjs文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

3文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

<div id="app">文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

  <p>{{ message }}</p>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

</div>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

3、NPM 方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

npm 版本需要大于 3.0，如果低于此版本需要升级它：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

3文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

4文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

5文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

6文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

7文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

# 查看版本文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

$ npm -v文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

2.3.0文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

#升级 npm文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

cnpm install npm -g文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

# 升级或安装 cnpm文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

npm install cnpm -g文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

在用 Vue.js 构建大型应用时推荐使用 cnpm 安装，cnpm 能很好地和 Webpack 或 Browserify 模块打包器配合使用：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

# 最新稳定版文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

$ cnpm install vue@next文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

命令行工具文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

3文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

4文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

5文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

# 全局安装 vue-cli文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

$ cnpm install -g @vue/cli文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

# 安装完后查看版本文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

$ vue --version文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

@vue/cli 4.5.11文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

注意：vue-cli 3.x 和 vue-cli 2.x 使用了相同的 vue 命令，如果你之前已经安装了 vue-cli 2.x，它会被替换为 Vue-cli 3.x。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

安装 @vue/cli-int：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

$ cnpm i -g @vue/cli-init文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

创建项目文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

3文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

4文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

5文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

6文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

7文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

8文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

9文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

10文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

11文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

12文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

13文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

14文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

15文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

16文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

17文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

$ vue init webpack runoob-vue3-test文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

# 这里需要进行一些配置，默认回车即可文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

? Project name runoob-vue3-test文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

? Project description A Vue.js project文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

? Author runoob <test@runoob.com>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

? Vue build standalone文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

? Install vue-router? Yes文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

? Use ESLint to lint your code? Yes文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

? Pick an ESLint preset Standard文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

? Set up unit tests Yes文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

? Pick a test runner jest文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

? Setup e2e tests with Nightwatch? Yes文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

? Should we run `npm install` for you after the project has been created? (recommended) npm文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

   vue-cli · Generated "runoob-vue3-test".文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

# Installing project dependencies ...文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

# ========================文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

...文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

进入项目，安装并运行：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

3文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

4文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

$ cd runoob-vue3-test文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

$ cnpm run dev文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

  DONE  Compiled successfully in 2558ms          文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

 I  Your application is running here: http://localhost:8080文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

vuejs3怎么安装？NPM方法安装vuejs3.0文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

注意：Vue.js 不支持 IE8 及其以下 IE 版本。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27695.html

  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/gcs/27695.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定