Vue.js 安装

 

1、独立版本

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

下载地址： https://vuejs.org/js/vue.min.js。

 

2、使用 CDN 方法

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

  • Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
  • unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
  • cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

1）使用 Staticfile CDN（国内）

<div id="app">
  <p>{{ message }}</p>
</div>

我要试一试

2）使用 unpkg（推荐）

<div id="app">
  <p>{{ message }}</p>
</div>

我要试一试

3）使用 cdnjs

<div id="app">
  <p>{{ message }}</p>
</div>

我要试一试

 

3、NPM 方法

安装 node.js，可以从 node.js 官网上直接下载，官网地址： https://nodejs.org/en/。安装过程非常简单，点击下一步，直至完成。

在 Window 系统上，我们通过打开命令行工具（win+R），输入node -v，查看 node 的版本，若出现相应的版本号说明安装成功。Linux 系统，直接在 Shell 里运行 node -v。

# 查看版本
$ node -v
v14.16.1

npm 包管理器集成在 node 中，所以安装了 node 也就有了 npm，直接输入 npm -v 命令，显示 npm 的版本信息。 

# 查看版本
$ npm -v
6.14.12

由于有些 npm 资源被屏蔽或者是国外资源的原因，经常会导致 npm 安装依赖包的时候失败，所以我们可以使用淘宝的镜像及其命令 cnpm。

安装或者升级 cnpm，直接输入：

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

或者

npm install -g cnpm

npm 版本需要大于 3.0，如果低于此版本需要升级。通过 cnpm 可以升级 npm：

#升级 npm
cnpm install npm -g

在用 Vue.js 构建大型应用时，推荐使用 cnpm 安装 Vue：

# 最新稳定版
$ cnpm install vue

 

4. 命令行工具

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author codebaoku <test@codebaoku.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

进入项目，安装并运行： 

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

注意：Vue.js 不支持 IE8 及其以下 IE 版本。

 

5. Vue 项目打包

打包 Vue 项目使用以下命令：

cnpm run build

执行完成后，会在 Vue 项目下生成一个 dist 目录，一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images。

如果直接双击 index.html 打开浏览器，页面可能是空白了，想要修改下 index.html 文件中 js、css 路径即可。

例如我们打开 dist/index.html 文件看到路径是绝对路径：

<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>
我们把 js、css 路径路径修改为相对路径： 
<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>

这样直接双击 dist/index.html 文件就可以在浏览器中看到效果了。

使用 npm 生成项目后，我们在 IDE（VSCode、Hbuilder、Eclipse、Atom等）中打开该目录，可以查看结构。目录说明：build：项目构建(webpack)相关代码。config：配置目录，包括端口号等。我们初学可以使用默认的。node_modules：npm 加载的项目依赖模块。