Vue安装

1、使用script引入

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

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

或者

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

  1. <!-- 开发环境版本,包含了有帮助的命令行警告 -->
  2. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

  1. <!-- 生产环境版本,优化了尺寸和速度 -->
  2. <script src="https://cdn.jsdelivr.net/npm/vue"></script>

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

  1. <div id="app">
  2. {{ message }}
  3. </div>
  1. var app = new Vue({
  2. el: '#app',
  3. data: {
  4. message: 'Hello Vue!'
  5. }
  6. })

完整示例代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Vue.js-蒲公英云</title>
  6. <!-- 开发环境版本,包含了有帮助的命令行警告 -->
  7. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. {{ message }}
  12. </div>
  13. <script>
  14. var app = new Vue({
  15. el: '#app',
  16. data: {
  17. message: 'Hello Vue!'
  18. }
  19. })
  20. </script>
  21. </body>
  22. </html>

运行效果图:

 

2、NPM 方法

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

使用淘宝 NPM 镜像

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

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

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

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

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

  1. $ cnpm install [name]

npm 版本需要大于 3.0,如果低于此版本需要升级它:

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

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

  1. # 最新稳定版$ cnpm install vue

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

打开命令行工具

  1. Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
  2. # 全局安装 vue-cli
  3. $ cnpm install --global vue-cli
  4. # 创建一个基于 webpack 模板的新项目
  5. $ vue init webpack my-project
  6. # 这里需要进行一些配置,默认回车即可
  7. This will install Vue 2.x version of the template.
  8. For Vue 1.x use: vue init webpack#1.0 my-project
  9. ? Project name my-project
  10. ? Project description A Vue.js project
  11. ? Author
  12. ? Vue build standalone
  13. ? Use ESLint to lint your code? Yes
  14. ? Pick an ESLint preset Standard
  15. ? Setup unit tests with Karma + Mocha? Yes
  16. ? Setup e2e tests with Nightwatch? Yes
  17. vue-cli · Generated "my-project".
  18. To get started:
  19. cd my-project
  20. npm install
  21. npm run dev
  22. Documentation can be found at https://vuejs-templates.github.io/webpack

先执行全局安装vue-cli

 

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

构建完成效果图

 

然后根据提示进入vue项目

 

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

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

智慧浩海

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值