cncml手绘网

标题: Vue.js 安装 [打印本页]
作者: admin    时间: 2018-7-1 23:05
标题: Vue.js 安装
Vue.js 安装1、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
% Y# m' d- e: m# s5 m3 E4 {% ]% V4 t
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
1 z8 Z# i9 x! V2 d
3、NPM 方法
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
npm 版本需要大于 3.0，如果低于此版本需要升级它：
  1. # 查看版本1 z. q& s9 q/ R# }2 E& u
  2. $ npm -v
    1 D. C' v- ^9 P4 p, V. c1 C+ i
  3. 2.3.0
    4 F7 i- Y; v3 e" i: B% A$ |
  4. 8 P6 y" [# C2 Q4 k" i
  5. #升级 npm* a% k% x- n6 u* L( @
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装：
  1. # 最新稳定版
    . ]" e- k3 _& R4 ]
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli3 {$ H+ A+ j( O8 R9 J$ P. a
  2. $ cnpm install --global vue-cli5 ~1 R2 M8 u1 o' Q
  3. # 创建一个基于 webpack 模板的新项目
    + E- r' k6 ^3 T
  4. $ vue init webpack my-project
    3 k9 V0 @9 q! D9 x. _
  5. # 这里需要进行一些配置，默认回车即可( }+ O; r2 a/ Z: \3 }: m' Z1 T5 \7 |
  6. This will install Vue 2.x version of the template.6 S' k" D. ]. _. B/ D& A
  7. ) Q! X5 _& P* x
  8. For Vue 1.x use: vue init webpack#1.0 my-project- }) W; J/ a( |( [$ b- y, B
  9. , T. w+ w: X5 w9 u' u% m. c
  10. ? Project name my-project! h# [! U8 Z. @4 N
  11. ? Project description A Vue.js project, `  k. @. @  n' o) J
  12. ? Author runoob <test@runoob.com>
    # _0 v8 F% I0 j& H. e" @
  13. ? Vue build standalone: A; M6 ]& ]9 F4 Y. `
  14. ? Use ESLint to lint your code? Yes
    - L5 b) k& m4 P- {: ^
  15. ? Pick an ESLint preset Standard3 w+ K5 L7 D& A& u& P
  16. ? Setup unit tests with Karma + Mocha? Yes; M2 d9 o9 I, Y/ u
  17. ? Setup e2e tests with Nightwatch? Yes  ~2 n; v' C! Z) v* ?
  18. * i! m  q* ~% \6 e
  19.    vue-cli · Generated "my-project".
    5 y4 k  b1 X4 T5 `* ~( D
  20. ! b. t, S2 s7 M, B% f: ?0 L
  21.    To get started:0 R* r) u1 N7 o" A. d+ ]; ]0 N
  22.    5 z3 s0 I- N/ s2 f: n/ R7 e8 I- T
  23.      cd my-project) v2 A4 {+ y3 h* l& g' \
  24.      npm install
    % |/ C4 ?" d! |) p/ w* Q
  25.      npm run dev$ F: ?: N  n, t6 ~0 I) o
  26.      B5 C* p7 }: a
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目，安装并运行：
  1. $ cd my-project
    0 ]: m; U7 z1 P7 B* S% K" C
  2. $ cnpm install
    + e9 p& a* V$ _: {: l: B  W. a
  3. $ cnpm run dev
    + G  X2 x8 V. {
  4. DONE  Compiled successfully in 4388ms% y0 J! ]2 L! m6 x1 ?. G1 {" f% P
  5. ' u: P7 M" f5 n) ~4 e) Q' h
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：
* k& b: k3 O8 n9 q5 x- @

; l! o9 ], B9 }1 S# B+ o) k6 A7 A% P" q% t7 T. s' ^: T
; H) f. \" ~4 M, {3 c6 m, H( B. H

- Q+ o& t: w' k( ^# ~6 O



欢迎光临 cncml手绘网 (http://bbs.cncml.com/) Powered by Discuz! X3.2