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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[Vue.js] Vue.js 安装

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-1 23:05:46 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
Vue.js 安装1、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
7 f, V( z6 P+ M  J# q  \+ M( Z
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。

; X# N; r9 Z- ]( j
3、NPM 方法
由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像
npm 版本需要大于 3.0,如果低于此版本需要升级它:
  1. # 查看版本9 y& A* q( u9 F' N: M' H
  2. $ npm -v- ]% \) g; S1 w3 t
  3. 2.3.0# Y. o) U. F& |$ ^
  4. , x1 ?$ L5 w; g) ^3 p  U9 \* P
  5. #升级 npm
    0 v" ]& F4 s* m  I
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装:
  1. # 最新稳定版. J0 d8 V! g: V# @5 |/ n
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli
    + m+ N* A. Z9 `7 [: T: ?6 ~! ?3 Z
  2. $ cnpm install --global vue-cli
    & J; D( m" p6 }
  3. # 创建一个基于 webpack 模板的新项目/ _& }; I, ]0 z
  4. $ vue init webpack my-project+ T4 T* k# y2 @
  5. # 这里需要进行一些配置,默认回车即可5 A/ s6 N5 `. l" n
  6. This will install Vue 2.x version of the template.) u5 ~4 P9 N0 ]4 X$ y

  7. ' l' }; w# ?; @- b
  8. For Vue 1.x use: vue init webpack#1.0 my-project& b7 A. D+ K3 ^8 X
  9. " F! j# v3 M- X& L) D" o
  10. ? Project name my-project! H# T1 h/ w, s/ S* Y  x- O6 m7 i
  11. ? Project description A Vue.js project
      ^2 `" H. K) _" P
  12. ? Author runoob <test@runoob.com>$ o4 b: l1 b. i2 g7 u
  13. ? Vue build standalone8 ?. o0 z% G7 H1 e
  14. ? Use ESLint to lint your code? Yes1 k% \" z3 {. C8 w4 k
  15. ? Pick an ESLint preset Standard
    , r. `( l( A% S
  16. ? Setup unit tests with Karma + Mocha? Yes+ S2 r0 F* j9 ~5 }1 _9 \
  17. ? Setup e2e tests with Nightwatch? Yes
    , q5 E7 G+ M" E) p6 J8 i. x& a4 v
  18. % ^: e; y+ Q. l
  19.    vue-cli · Generated "my-project".
    2 r4 Z6 N* Y2 n( f
  20. - G" z; l" t, |$ B9 o  r# ?& x: N
  21.    To get started:% X& W7 x' z/ x: U' j8 ?. V3 m+ ]
  22.    
    ) s. B5 J3 y4 S$ B# [
  23.      cd my-project
    9 I; j1 m, T# `- i( ~
  24.      npm install
    9 Q: r7 V3 K/ P2 H& k% d
  25.      npm run dev
    / H2 v, x5 C9 l* P6 ^6 I' {# h
  26.    
    5 z* ^7 C; k' S% ?9 V
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目,安装并运行:
  1. $ cd my-project' O% P) q  j8 ]+ s2 H
  2. $ cnpm install
    2 Q) |5 \; Y& W0 o, \% E7 {% F! s
  3. $ cnpm run dev# Y3 E( ]% A; O: Z, ?: U
  4. DONE  Compiled successfully in 4388ms0 @9 G! _6 [% \! q4 S8 |" d

  5. / N) ?+ o, Y% S% S1 W* b6 L
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:
7 a  V  u. R0 l+ T# r: _
) b0 V; ^, z# M5 N. v4 [7 ^% D* J

) T0 V2 M& p# r* |
1 }) P1 z$ Y. p) S8 N+ C7 Y1 {3 i6 K# l8 Q; Z$ M" V
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-9-22 04:12 , Processed in 0.063686 second(s), 22 queries .

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