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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[Vue.js] Vue.js 安装

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

# ?4 v! R" b& i& g4 M& y& g
3、NPM 方法
由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像
npm 版本需要大于 3.0,如果低于此版本需要升级它:
  1. # 查看版本
    5 g# E5 ~$ }" T1 w1 {" R
  2. $ npm -v# w# A& E9 v2 P1 x
  3. 2.3.07 A# E" c, o. ], {
  4. & o8 A$ B2 v4 a+ \$ K
  5. #升级 npm1 ^# P3 ]1 W% {: n. j
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装:
  1. # 最新稳定版
    1 w$ S6 l5 N2 @' u
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli
    5 O: J! G& `/ A3 x) s# F* q
  2. $ cnpm install --global vue-cli
    ) C3 q3 _5 m6 Y* k0 t% i
  3. # 创建一个基于 webpack 模板的新项目
    7 d8 ^9 n; g& F) _; L& f
  4. $ vue init webpack my-project1 r2 s# ]1 D* t. H
  5. # 这里需要进行一些配置,默认回车即可
    . Q4 N- Q/ E8 a
  6. This will install Vue 2.x version of the template.
    , f2 X+ a. D  u1 S

  7. 7 p0 S! d5 D1 j6 _4 N
  8. For Vue 1.x use: vue init webpack#1.0 my-project+ Q: p8 m- T2 Z7 _

  9. 3 e' ^' E/ L; j# e3 j
  10. ? Project name my-project3 c3 l. z' n' G+ K* H, z
  11. ? Project description A Vue.js project
    / X6 C' ^) P) N
  12. ? Author runoob <test@runoob.com>+ }1 ]1 V  S  ~* w+ n1 v) E
  13. ? Vue build standalone( F6 r" W) H. O1 W
  14. ? Use ESLint to lint your code? Yes, a, |! X6 u* I7 Z. ^
  15. ? Pick an ESLint preset Standard
    ( K5 }6 ?7 m5 w$ u7 P
  16. ? Setup unit tests with Karma + Mocha? Yes# O- n( W- n: K+ z  n) Z
  17. ? Setup e2e tests with Nightwatch? Yes) n+ K3 w- _7 x) S! F0 X
  18. , n1 U( U. l# x* N+ r  ?% `' Z
  19.    vue-cli · Generated "my-project".+ D5 s* S' u  T4 W- d  b" r

  20.   H$ T- T! b% ~
  21.    To get started:
    . a% l- u* K. r
  22.    
    3 w7 E, r& S' W2 ^# n; \9 Y
  23.      cd my-project
    ! t& x8 x0 {. a. a  }$ d7 ]
  24.      npm install/ o, b) l$ F; g: e# Y
  25.      npm run dev4 S; p5 Y; }2 I$ B2 ^' T
  26.    
    2 [! b+ K: j6 b% @
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目,安装并运行:
  1. $ cd my-project
      s" S5 m* G9 q: k0 c
  2. $ cnpm install+ F6 V( n$ r. o5 w- L
  3. $ cnpm run dev2 \2 t, R  q4 V, v9 S
  4. DONE  Compiled successfully in 4388ms5 }. V& i( H! {& i# J" v
  5. 9 ?# |! [" q' O! \  N9 J, H$ |
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:
4 i3 K3 E5 z( U7 p" O0 T

3 C$ y" h5 o+ P, k) A" d6 _4 Q0 S7 p& U- B4 B& _; w  W0 J* J
. G( T1 b1 i" q9 a/ U! c* k. [
) V4 `; N, e1 D5 X' d9 y
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-1-30 16:32 , Processed in 0.053427 second(s), 23 queries .

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