Vue.js安装

最新推荐文章于 2025-10-11 15:43:38 发布

原创最新推荐文章于 2025-10-11 15:43:38 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #安装教程

Vue 专栏收录该内容

48 篇文章

订阅专栏

方式一：直接CDN引入

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载和引入

进入官网：https://cn.vuejs.org/v2/guide/installation.html，右键点击你需要的版本链接另存为

然后在使用的时候引入即可

方式三：npm安装

在 NPM 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。
这里列出了它们之间的差别：

	UMD	CommonJS	ES Module
完整版	vue.js	vue.common.js	vue.esm.js
只包含运行时版	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js
完整版 (生产环境)	vue.min.js	-	-
只包含运行时版 (生产环境)	vue.runtime.min.js	-

1、安装命令行工具 (CLI)

Vue 提供了一个官方的 CLI，为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

安装cnpm

在国内，使用淘宝的镜像会比较快安装一些包。

我前面己经安装好了node.js和npm，上图是进入命令行，npm安装cnpm：

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

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]

安装vue-cli

vue-cli用于快速搭建大型单页应用,可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

$ cnpm install --global vue-cli

如上图，使用--global选项是因为这样可以在全局下使用vue-cli工具来创建vue项目，而不是要在特定的安装目录下才能使用vue-cli。

$ vue -v查看版本验证安装成功与否

因为vue命令去初始化项目的时候实际上还是使用的是npm去安装各种模块，并没有使用cnpm，所以还是先设置npm使用淘宝中的镜像比较快。

2、新建vue项目

新建一个项目文件夹，进入该文件夹后敲以下命令初始化一个vue项目

vue init webpack 项目名称

其中webpack为vue的其中一个模板。
查看帮助得知，如果自己的github仓库上己有模板也可指定github上的仓库来初始化项目:

下图开始初始化一个vue项目，利用的就是vue-cli和webpack：

vue init webpack my-project

? Project name vue-start //项目名称
? Project description A Vue.js project // 项目描述
? Author  // 作者名称
? Vue build standalone // 推荐选前者

? Install vue-router?  
// 是否安装vue-router路由组件，也可不安装使用第三方或简单的项目自己写

? Use ESLint to lint your code? 
// 是否使用eslint管理代码，个人项目不推荐

? Set up unti tests?
// 是否使用karma来做单元测试

? Setup e2e tests with Nightwatch?
// 是否安装e2e测试

? Should we run 'npm install' for you after the project has been created?
// 选择使用npm或yarn进行安装模块