您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 14874|回复: 0
打印 上一主题 下一主题

[Vue.js] Vue.js 安装

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-1 23:05:46 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
Vue.js 安装1、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
% M) G& d  N4 G! _7 ]  g7 u
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。
2 v8 N+ _& E6 Q! W1 k, x, M4 E
3、NPM 方法
由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像
npm 版本需要大于 3.0,如果低于此版本需要升级它:
  1. # 查看版本& U0 Z0 h8 N! o5 R, p, x
  2. $ npm -v, v5 h1 S8 d; e4 D* f9 S) V
  3. 2.3.02 a' y: A9 w6 X

  4. - ~) e8 R7 f8 N0 Z
  5. #升级 npm  |0 ]' P4 o, M) j/ ?: V/ Q
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装:
  1. # 最新稳定版& S2 f& s+ N) S# j
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli, _* A7 D3 a# o' a% J, B7 x
  2. $ cnpm install --global vue-cli& W; y. e& f% C" p5 S! E1 D0 w
  3. # 创建一个基于 webpack 模板的新项目
    7 }  w0 j  Q" d) c
  4. $ vue init webpack my-project
    9 Y8 w' j6 V$ g) f# l* ?
  5. # 这里需要进行一些配置,默认回车即可
    9 X$ x; |" X( r% F8 x. i$ J4 ]
  6. This will install Vue 2.x version of the template.
      u, i: p" I- m2 f6 D8 Q
  7. 8 R2 _/ x) r! c
  8. For Vue 1.x use: vue init webpack#1.0 my-project
    9 S5 j0 [( M" x

  9. ! V4 v6 X5 a# p. l$ s( a+ Y
  10. ? Project name my-project
    ' `- D3 w$ g( O
  11. ? Project description A Vue.js project  t5 q! }9 M0 Q( g
  12. ? Author runoob <test@runoob.com>
    % P; F" T1 r) |$ K3 j- B
  13. ? Vue build standalone1 c4 I( x( x: F% d1 s6 r" a
  14. ? Use ESLint to lint your code? Yes) ]- h4 ~5 Z% h1 {2 v: s# I  ^
  15. ? Pick an ESLint preset Standard; p- c' f8 u* E/ [; l' [* G; ~3 ~
  16. ? Setup unit tests with Karma + Mocha? Yes* y& F$ Q* R% r8 Z
  17. ? Setup e2e tests with Nightwatch? Yes+ n) E' Z! Y7 X9 g. f# `; k

  18. & N/ ^7 k' A2 \; q& ]6 I3 y
  19.    vue-cli · Generated "my-project"." B' M' E! ]% w, b, j
  20. ( ?- o* ]' u) k6 n* R
  21.    To get started:! z" a0 K2 Q" O4 l$ \$ }& Y
  22.    
    " e: ?6 z0 {7 d" s
  23.      cd my-project
    / n3 G, @  J1 ~
  24.      npm install: C3 e1 k" ]+ \- A6 h
  25.      npm run dev5 U4 R9 _( T! G8 b; K
  26.    ' `. |, E5 O: M2 ^  F  s5 N# U
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目,安装并运行:
  1. $ cd my-project" _3 @2 W2 B  j) s4 |+ _
  2. $ cnpm install
    3 ]; B/ L1 W# Y8 C" @
  3. $ cnpm run dev
    ( |% O2 I; ~; y
  4. DONE  Compiled successfully in 4388ms
    . v  K& ~) Q( a- U2 P. V

  5.   s. H) d" U; _. L- h  I
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:

; K) C' P) E2 G4 R$ C, t6 S( M( B8 G, m% Z$ N& F7 X/ @9 Z8 ]1 |# O

/ a" H0 c, l' o* g- n( q, o; O/ P, \9 Y$ d, C2 R: b
* d+ s! k) U  K# a; O
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-16 17:24 , Processed in 0.063985 second(s), 23 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!