Vue.js 安装-向日葵屋

# Vue安装

#### 1、使用script引入

在Vue.js的官方网站下载 vue.min.js ，使用`<script>`引入vue.min.js。

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

或者

直接使用官方提供的两个在线版本

```html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```

或者

```html

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
```

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

```html
<div id="app">
  {{ message }}
</div>
```

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

完整示例代码：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js-蒲公英云</title>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{ message }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

</body>
</html>

```

运行效果图：

![](/images/1593174397744.png)
#### 2、NPM 方法

在安装npm之前这里必须声明一下，npm默认安装是非常慢的，所以这里使用淘宝镜像安装命令。

**使用淘宝 NPM 镜像**

大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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

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

```shell
$ cnpm install [name]
```

npm 版本需要大于 3.0，如果低于此版本需要升级它：

```shell
# 查看版本$ npm -v2.3.0#升级 npmcnpm install npm -g# 升级或安装 cnpmnpm install cnpm -g
```

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

```shell
# 最新稳定版$ cnpm install vue
```

**淘宝镜像安装完成之后接下来搭建一个vue项目**

**打开命令行工具 **

```shell
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 
? 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
```

先执行全局安装vue-cli

![](/images/1593174378512.png)

创建一个基于 webpack 模板的新项目(vue init webpack my-project)

![](/images/1593174363120.png)

构建完成效果图

![](/images/1593174350126.png)

然后根据提示进入vue项目

![](/images/1593174339211.png)

![](/images/1593174324916.png)

此时我们就可以访问`http://localhost:8080`

![](/images/1593174306708.png)

然后我们修改Welcome to Your Vue.js App为：蒲公英云 Vue.js 教程

![](/images/1593174294505.png)

然后刷新看最终效果：

![](/images/1593174262742.png)