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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[Vue.js] Vue.js 安装

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

, m0 ]: a2 `3 y- b
3、NPM 方法
由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像
npm 版本需要大于 3.0,如果低于此版本需要升级它:
  1. # 查看版本
    # [" O* X, q6 u! Y" j
  2. $ npm -v: w" Q5 n8 [  r+ z  I6 K  L- l! ~
  3. 2.3.02 W& h6 w0 m5 T) m$ D+ b
  4. ' p! ~4 H4 f1 y; T0 e
  5. #升级 npm) M0 [: |  X  N4 v" N& g
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装:
  1. # 最新稳定版0 g. _6 y" Q+ w1 L+ c
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli  r( D# ~' e1 ]6 }
  2. $ cnpm install --global vue-cli/ n6 S2 B$ J  n" f& J
  3. # 创建一个基于 webpack 模板的新项目: r. f) d% ~3 t, f, a6 F& u. Q4 O' x
  4. $ vue init webpack my-project/ d. E! I( G4 h9 f4 i% N( V% w
  5. # 这里需要进行一些配置,默认回车即可$ p% L# _9 Q5 w6 @7 M: r
  6. This will install Vue 2.x version of the template.3 X+ k$ V! S! j8 V* X3 u$ k, i

  7. * o. ]  r; z9 M+ i! a! Z
  8. For Vue 1.x use: vue init webpack#1.0 my-project2 o9 E  O8 K! f
  9. / q7 p% }  P, |& E. S! b; P) X
  10. ? Project name my-project' k% f( D! G7 X8 v# s( U; f
  11. ? Project description A Vue.js project0 z) z9 g2 R4 w5 y$ P% j
  12. ? Author runoob <test@runoob.com>& F% f: Q+ C" c+ o, N
  13. ? Vue build standalone1 }- e* F$ I+ X
  14. ? Use ESLint to lint your code? Yes
    8 G) h8 v: w& ]) W( T/ D
  15. ? Pick an ESLint preset Standard
    : |1 s( M- n2 q% \! ~
  16. ? Setup unit tests with Karma + Mocha? Yes
    2 e6 n1 O7 ]6 U6 G: U0 \
  17. ? Setup e2e tests with Nightwatch? Yes- Y) v8 _% Z# e
  18. # x" m: p" U1 N/ N
  19.    vue-cli · Generated "my-project".
    . @1 N3 n5 [$ t5 e/ ?8 N, S; }6 K1 ?

  20.   t% u; {% l/ h8 Z! s' K# |
  21.    To get started:
    3 E; z9 X$ ~, R, {+ s5 W0 T. u
  22.    ) H/ |! F) i# p" z; }
  23.      cd my-project  @# O% H8 O8 e0 w' f  v
  24.      npm install7 N: Q% O' \) z& s: T
  25.      npm run dev) R# P5 F" S/ c8 A( D
  26.    
    ' b' |+ T9 G) v' Y* W) f" c2 G4 O( p
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目,安装并运行:
  1. $ cd my-project
    , \) {2 T7 N0 g
  2. $ cnpm install
    6 Z2 f( H0 F& u- ]5 ?. U
  3. $ cnpm run dev
    0 x9 u- t0 ?% p  i2 }
  4. DONE  Compiled successfully in 4388ms3 u& R; ?' {& t7 k# \
  5.   Z: L( T6 ?0 [5 E
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:
: G: [% G+ J: L+ ?/ A, b0 y" N

8 C0 J0 T- Z; F3 C) A* v/ r. ]) v% d$ v. n8 x; d$ r
0 m. m; K% b3 h$ m! t

: v) E* m! q  e; f+ f+ T9 ^: p  }
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-9-21 02:06 , Processed in 0.062110 second(s), 23 queries .

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