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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[Vue.js] Vue.js 安装

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

0 b) n4 X4 U6 V' }; l& d
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。
* Z! F( @, X4 C6 ?
3、NPM 方法
由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像
npm 版本需要大于 3.0,如果低于此版本需要升级它:
  1. # 查看版本0 h# l; I8 M& }. f8 `7 Z
  2. $ npm -v
    ( k# e) O) O. i
  3. 2.3.0
    7 d8 S8 i/ \) p3 q1 o0 w7 a
  4. - X$ |0 N3 s0 q  B! T1 \* O
  5. #升级 npm7 X3 F0 p  h" e, u' T
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装:
  1. # 最新稳定版
    $ V' d: `- K; U. T6 L
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli
    . @8 z8 z' O; N9 [
  2. $ cnpm install --global vue-cli' |, n1 j7 Q4 r  p1 T, }
  3. # 创建一个基于 webpack 模板的新项目- @% ?( Y; g3 i
  4. $ vue init webpack my-project
    " z7 P/ U8 M% d0 I
  5. # 这里需要进行一些配置,默认回车即可) w  W: ^, ?, Z0 q  A2 G
  6. This will install Vue 2.x version of the template.( D6 v7 T) ^5 Y2 a9 e8 @" ]7 a0 [
  7. ; V' T2 S+ y& p+ Y$ ^5 A
  8. For Vue 1.x use: vue init webpack#1.0 my-project" z4 b5 m, F7 \

  9. & q3 t& C; ?; \! ?0 \/ P9 Q0 h0 F6 s* O
  10. ? Project name my-project- {3 `& h. Z5 h/ {+ H+ _
  11. ? Project description A Vue.js project
    . F  `5 ]7 S) _6 K
  12. ? Author runoob <test@runoob.com>" X6 m  G& h+ e1 f
  13. ? Vue build standalone# U1 i4 L( r8 H
  14. ? Use ESLint to lint your code? Yes, }9 ^4 Y1 r/ q, m7 b  l$ x# f
  15. ? Pick an ESLint preset Standard- [0 F! ?4 J1 G
  16. ? Setup unit tests with Karma + Mocha? Yes
    8 D& K, C, O0 U/ L. d! ~) F
  17. ? Setup e2e tests with Nightwatch? Yes
    ; j: o. ]. j  K$ j7 j9 w

  18. 8 U  n0 i' V# l# h  ?) ~) `
  19.    vue-cli · Generated "my-project".
    4 z& b2 g, E  }( s0 J# J0 j" t- }

  20. , l& @8 W+ l/ l( ?
  21.    To get started:
    0 H, N% M6 m& d9 X5 t
  22.    
    / v& D, p& e" A- \7 |
  23.      cd my-project
    * ?; z8 c: j5 Z) t7 D2 c  o
  24.      npm install
    3 N/ d& ~+ E1 n4 Q
  25.      npm run dev
    % Y2 V6 [& c, X! W! ~0 Q
  26.    
    5 R! y8 h0 S" S' F8 l
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目,安装并运行:
  1. $ cd my-project
    - |8 @% {5 W# l9 w: A
  2. $ cnpm install
    ( j5 ^( A# J( O! d; W
  3. $ cnpm run dev
    + L0 D& k4 O5 r) _
  4. DONE  Compiled successfully in 4388ms
    / d2 `+ U. b/ d  q* i: h+ p( x

  5. ' x, K: f& Z/ q
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:

& q. X% G" ^( u/ Z; R3 g
& Q' L! G2 o$ C; W1 Z2 ]7 x
8 V  U" a8 }' ?8 m- M& }* q- Z6 m6 F  T1 U. V+ ~3 Y- o) p

9 o/ s3 \% ]) D+ g" q
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-1-30 15:05 , Processed in 0.054961 second(s), 22 queries .

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