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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[Vue.js] Vue.js 安装

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-1 23:05:46 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
Vue.js 安装1、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

3 S+ _( z9 n( w
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。
- M0 F* j& H4 X. l
3、NPM 方法
由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像
npm 版本需要大于 3.0,如果低于此版本需要升级它:
  1. # 查看版本
    2 d& O* |" m* M" r
  2. $ npm -v
      k& V; ]" k+ g
  3. 2.3.0
    2 H# o3 Y" Y/ @( w6 C5 ~" T' U0 |

  4. ( K/ }' S7 c9 o/ Z) M% C% @/ d; q5 m
  5. #升级 npm
    % j; W" V8 c7 n6 O- V
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装:
  1. # 最新稳定版
    2 J3 _- r' r; s2 w; B- I7 ?1 z% H
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli
    1 i4 @% x4 k4 u5 G" b& u6 _! m
  2. $ cnpm install --global vue-cli
    ( T+ x1 E1 u/ n8 x2 L5 ]
  3. # 创建一个基于 webpack 模板的新项目
    1 |& m$ w0 z$ v
  4. $ vue init webpack my-project2 g" o+ Z4 A3 n$ B# _
  5. # 这里需要进行一些配置,默认回车即可
    & r- K2 S% M8 f9 D' g# K2 Z
  6. This will install Vue 2.x version of the template.5 n0 l5 ~. h; m; L: @/ @
  7. ) p. d% D, B+ d9 d5 l0 Q, O
  8. For Vue 1.x use: vue init webpack#1.0 my-project& o2 ^0 S' r7 C

  9. ' U1 k$ E8 _. R: d: M
  10. ? Project name my-project* y7 {. C( U9 U9 r$ M) K/ Y
  11. ? Project description A Vue.js project4 v5 T! d7 w. ~; E4 j- d* j
  12. ? Author runoob <test@runoob.com>( ~3 }* U; T0 B
  13. ? Vue build standalone
    0 h  a. ]; t7 I) w7 X3 w
  14. ? Use ESLint to lint your code? Yes/ Z- U7 m4 Q+ G( q) e% Q
  15. ? Pick an ESLint preset Standard
    # x( Z1 E2 n8 d0 v3 B; u* v
  16. ? Setup unit tests with Karma + Mocha? Yes( y9 q3 [* A* I7 Q8 N1 d3 E$ C% Z
  17. ? Setup e2e tests with Nightwatch? Yes) ^  u6 ]5 p. z( s

  18. # p0 l( {- Q; w( k& C1 p* L- K
  19.    vue-cli · Generated "my-project".$ g- u# c/ R- L$ b! i
  20. % V2 j& T; f' z4 b4 ?1 N; A+ r
  21.    To get started:
    % F2 r; P3 |: n% b9 [9 b0 `+ A
  22.    
    : ?' R( d7 t! C3 z
  23.      cd my-project
    3 O7 n- e; k+ I2 e! T
  24.      npm install
    - V- A* b( m7 {6 A8 g6 ]- ?2 w
  25.      npm run dev& ^3 Q# S1 O1 \8 w
  26.    
    8 Z3 t% Q: R/ b
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目,安装并运行:
  1. $ cd my-project) s/ P+ q- V4 f) r, x% i
  2. $ cnpm install. v; @+ G+ u! [5 Y" _, ]$ p  X6 o1 h
  3. $ cnpm run dev
    5 s& ?; |7 F- G/ a& O
  4. DONE  Compiled successfully in 4388ms
    % y$ s  T1 G9 u. e
  5. / l! z  ~: w, k& y
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:
: d) h0 h- {! R" j: \
8 ^. h: C' o3 h/ i3 P8 I0 l$ |

- j( B! W8 M3 ?
3 f5 b, f8 r9 X/ x. d: ]1 S2 x' k3 ?: y8 Y
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-9-22 07:00 , Processed in 0.054848 second(s), 22 queries .

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