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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[Vue.js] Vue.js 安装

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

; B1 T% L# W4 E7 P' Q
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。

9 A6 Z% b" m( e. G5 }( b, ?$ m
3、NPM 方法
由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像
npm 版本需要大于 3.0,如果低于此版本需要升级它:
  1. # 查看版本
    2 _& _4 l! s- x) N  G
  2. $ npm -v' f" M0 o6 f( o' V
  3. 2.3.0
    ! }) D& b9 J% n# U

  4. / a8 r, r+ V5 J& l5 n4 ^8 k
  5. #升级 npm0 x8 h) p/ {  A$ N! [
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装:
  1. # 最新稳定版6 k9 r% y/ }& O# R1 x  W
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli/ {& H4 l) b$ d6 ^9 p) _: c5 x7 b
  2. $ cnpm install --global vue-cli
    : K3 d; u, {; ?4 w: H/ M; {! F
  3. # 创建一个基于 webpack 模板的新项目
    1 Q4 A9 g0 F, H; N6 R1 y" z8 }# F
  4. $ vue init webpack my-project
    " T+ n0 X( S+ Z/ l* ~
  5. # 这里需要进行一些配置,默认回车即可/ k; [. @$ ~+ t" t6 u" m
  6. This will install Vue 2.x version of the template.
    6 c* A* N+ }& l' R  H8 U' Q
  7. 7 n3 G+ J, z# f- ]9 _, C
  8. For Vue 1.x use: vue init webpack#1.0 my-project
    + o, F8 y3 |/ m- p- d9 e

  9. + W1 h3 l4 r/ d( u& Q% \6 P8 n
  10. ? Project name my-project- m9 \8 F2 Z  o, [
  11. ? Project description A Vue.js project/ U7 P  v7 s$ o& H2 q3 {! u
  12. ? Author runoob <test@runoob.com>
    % \1 x) e# D9 A0 E
  13. ? Vue build standalone
    1 a0 j8 e  X' T  K2 ?
  14. ? Use ESLint to lint your code? Yes# Y" Y2 R7 E1 v1 P* ?* m7 l; W- K
  15. ? Pick an ESLint preset Standard1 d( l5 r9 _0 K5 g1 Y2 e( I
  16. ? Setup unit tests with Karma + Mocha? Yes
    ; F& g4 V, L8 D0 ]- s
  17. ? Setup e2e tests with Nightwatch? Yes) Y+ d! Y9 ~- F+ b3 F
  18. " w/ D1 [/ n- W" _5 |. C
  19.    vue-cli · Generated "my-project".% I: R5 o& m3 m; K2 o0 ^
  20. 7 X- D! u3 E& j# w. \: |
  21.    To get started:# ^5 G: b# w4 i" G
  22.    ; C4 B7 k" L: ~, V5 Z8 d% B
  23.      cd my-project
    4 k" `5 [3 Z- B* [) p& H
  24.      npm install
    , ?- z+ w( Z' l" F" Z
  25.      npm run dev/ j: g% j" s" `3 `0 o
  26.    / O, I  n& h* w4 t0 F% G
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目,安装并运行:
  1. $ cd my-project, D& N- j5 p" E* Z$ K" r4 A
  2. $ cnpm install
    + T" J  m' u" b8 g7 |
  3. $ cnpm run dev. P6 j$ L7 ]# z
  4. DONE  Compiled successfully in 4388ms$ E8 a; q4 n2 K* Z
  5. 3 J+ G4 r5 ~' W0 k  {
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:

; j' k* k3 ~) W; e* P6 U9 }& y% Y5 T7 K; ?

/ }* [2 ^& \" ]8 ?4 A! k! k
1 E2 N+ T* ^4 ^( M8 Y! i+ V  S$ H* p) t% H4 D. E
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-17 20:20 , Processed in 0.057463 second(s), 22 queries .

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