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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[Vue.js] Vue.js 安装

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

6 j  I7 B, E) z3 O0 Y3 |& }
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。
) `0 @9 `1 \3 l; x
3、NPM 方法
由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像
npm 版本需要大于 3.0,如果低于此版本需要升级它:
  1. # 查看版本
    + Z" y9 ~- l- W* N. n6 g
  2. $ npm -v' S+ h) d3 E. ]
  3. 2.3.0
    - T8 `! A2 y  K. L5 n: L

  4. 0 d" X: y* Y; t& M+ y  _# N
  5. #升级 npm( }% q  ~2 R8 I2 P, \: R& B
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装:
  1. # 最新稳定版9 J* g, _" I9 d5 o- j7 c6 @
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli" {- e. H( [% j+ f! p* [" q! L; r
  2. $ cnpm install --global vue-cli/ Q0 M% m6 Y5 K% x
  3. # 创建一个基于 webpack 模板的新项目% ^3 t# |, E3 i5 f( C1 J5 ]
  4. $ vue init webpack my-project% F$ ^) R2 f2 H) A; m
  5. # 这里需要进行一些配置,默认回车即可
    : v6 u5 v; V8 t! V9 M# }7 q5 H
  6. This will install Vue 2.x version of the template.* V3 S* t) x6 [: T4 t+ G' S
  7. - R- U9 G/ a+ g# M- R( X2 U
  8. For Vue 1.x use: vue init webpack#1.0 my-project* F) R8 [- H( x) H& x' C& A0 W" ?

  9. ( y, E9 [! L) ]4 h
  10. ? Project name my-project8 W2 p4 L$ L: u* a5 a# B
  11. ? Project description A Vue.js project
    & N" Q8 x, ?( J( n! Y
  12. ? Author runoob <test@runoob.com>
    3 p% V/ K% f3 m' X/ f/ ?) d
  13. ? Vue build standalone
    2 Q" W& r& a9 [
  14. ? Use ESLint to lint your code? Yes  i" K4 b2 X, @+ e; P4 K
  15. ? Pick an ESLint preset Standard
    * [. a8 L% n: L2 j
  16. ? Setup unit tests with Karma + Mocha? Yes
    , V$ N9 d# ^2 `
  17. ? Setup e2e tests with Nightwatch? Yes& a- O  N- b  E; Y

  18. 8 x4 v% q* w  @4 n) m" M
  19.    vue-cli · Generated "my-project".
    & D0 ~& n! p' R" Y- Q# Z

  20. & K6 `. P' S/ r( ~; X6 ]
  21.    To get started:
    " `/ K- U0 i! Z: B
  22.    
    - V+ ?0 }) m& }& F" ?" W5 t! p4 K
  23.      cd my-project
    5 d( S; N9 }! Q9 ]5 T# {
  24.      npm install( n: P/ A8 G# G! V
  25.      npm run dev# f) `) \8 ^; w
  26.    
    . a2 h/ d" M) b$ Y  Z5 m
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目,安装并运行:
  1. $ cd my-project9 w0 E( @, X) C, V+ ~) F" n& G
  2. $ cnpm install) B' {" \( ~7 ?% Z5 z+ q7 L+ v) D, ]
  3. $ cnpm run dev# W0 u( X2 j, E9 X% |, T, `
  4. DONE  Compiled successfully in 4388ms
    1 `1 H$ h) K6 J2 ^% q; Q4 |; w! c

  5. & |6 D$ I. H. ^& o/ p5 K3 `5 _4 l
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:
* t/ M# V! a; c% q% e
$ r  Z) v) D. `1 U! Y6 E
. d( Y. |; m- ^# P
5 |7 b' p7 N3 f0 h2 F$ p6 r
& h' I- _# o+ W1 H6 S) j. ^
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-6-20 04:18 , Processed in 0.059187 second(s), 23 queries .

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