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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[Vue.js] Vue.js 安装

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

4 c! `% N; o# P; G3 b
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。
+ \  t2 }( _7 W6 e
3、NPM 方法
由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像
npm 版本需要大于 3.0,如果低于此版本需要升级它:
  1. # 查看版本' l3 o# [! q& K% q0 Z. s
  2. $ npm -v% V1 M/ U& [  J! D: b, B8 L
  3. 2.3.0
    / _$ W( E& c9 i" \  l6 {; }
  4. , B) T. g0 V6 [: C* I
  5. #升级 npm+ S, W# d9 ?5 s* f
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装:
  1. # 最新稳定版
    0 G; W7 F0 Z" S* M
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli& @: _, N% w, ~# K3 M
  2. $ cnpm install --global vue-cli
    0 g$ y% x( {9 ^
  3. # 创建一个基于 webpack 模板的新项目
    $ }6 c# `8 d$ @4 {; |
  4. $ vue init webpack my-project
    ' O4 ?) i  r9 F! U
  5. # 这里需要进行一些配置,默认回车即可" r7 ~0 s; y% t$ k" V* Y
  6. This will install Vue 2.x version of the template./ Z3 ^0 O2 U# u. E

  7. ! v. A6 H  ?; K4 r
  8. For Vue 1.x use: vue init webpack#1.0 my-project
    ' @* b# h* s. o  y

  9. , ?3 _1 n3 h7 Q9 d/ ~
  10. ? Project name my-project
    / x* {8 m9 H5 K: E, d
  11. ? Project description A Vue.js project
    * C8 ]8 m% [/ G9 c' L. I
  12. ? Author runoob <test@runoob.com>2 y& v& Z# y5 E1 f
  13. ? Vue build standalone
    ) S9 y- {) z! j0 S
  14. ? Use ESLint to lint your code? Yes6 ]+ w: I; S3 V7 y: o! S
  15. ? Pick an ESLint preset Standard
    8 F$ L; W' s3 {& o$ t) z
  16. ? Setup unit tests with Karma + Mocha? Yes0 w# \9 Y0 A0 p
  17. ? Setup e2e tests with Nightwatch? Yes
    / i$ o; D/ N7 z) T1 i
  18. 2 N. W+ _  I9 }% s/ Z& G# y" o. H! Q
  19.    vue-cli · Generated "my-project".
      y4 w% v' E' r: i2 ]- U
  20. ! {& P& M+ R. u
  21.    To get started:' j0 Y- n2 C, L3 j9 u9 a$ V
  22.    1 T2 u9 d+ u$ @1 t4 |
  23.      cd my-project; [( w4 S) q7 ?3 S! J9 p9 x
  24.      npm install
    1 m3 q" C8 T) M7 g
  25.      npm run dev$ ?5 E3 Y) l# a; Z: q
  26.    7 e, @& L! A2 l1 X# D
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目,安装并运行:
  1. $ cd my-project
      A% Y! Z8 m& B4 }
  2. $ cnpm install7 e7 O1 V0 \- `8 _) _0 \
  3. $ cnpm run dev
    / i' p8 l: W6 R  g
  4. DONE  Compiled successfully in 4388ms
    7 N* A9 f( a$ g+ J& M# j

  5. & Z  B% p' g: \1 u- R2 i. K/ ]& ?8 a8 N
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:

# }! @7 M, n' Y% T/ v+ R
5 x! ?) C: R6 S, Y, O
! x3 N# {0 I) l- A2 v4 B3 J- W! r# S, k; L1 k, K* T

& E% G( T: X7 F) H+ T8 H1 o
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2024-5-19 12:42 , Processed in 0.114013 second(s), 22 queries .

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