cncml手绘网

标题: Vue.js 安装 [打印本页]
作者: admin    时间: 2018-7-1 23:05
标题: Vue.js 安装
Vue.js 安装1、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

% N5 K2 P. n8 m6 Q( u" g
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
. b  d! p& A# t% V6 C
3、NPM 方法
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
npm 版本需要大于 3.0，如果低于此版本需要升级它：
  1. # 查看版本+ |+ J1 q" a! A0 [; F: `
  2. $ npm -v
    9 {( C) K* Q2 F( X
  3. 2.3.0
    9 V/ \. r6 x* N

  4. 7 @. {( V5 s3 }" c- X1 q3 k
  5. #升级 npm
    0 z4 l2 W6 Y+ Z$ p
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装：
  1. # 最新稳定版9 A: N+ N$ x- _( {( ^( V
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli* m" j8 O4 j+ P& x/ X8 \3 ~
  2. $ cnpm install --global vue-cli
    ' K) c! F4 A9 X
  3. # 创建一个基于 webpack 模板的新项目
      y* G% m/ `) @7 l$ {5 W" w
  4. $ vue init webpack my-project/ s; F6 T, t, f; j1 w4 s1 J8 O
  5. # 这里需要进行一些配置，默认回车即可
    9 R7 k7 e0 F, C" m
  6. This will install Vue 2.x version of the template.
    . B0 I) f. @( z1 N
  7. 0 N) P- I6 L3 |3 ~9 o5 m  i& Y/ l
  8. For Vue 1.x use: vue init webpack#1.0 my-project( w' T1 N7 i  b: J4 \7 Y
  9. 5 q6 a: @# J# p: e, ?8 `4 r
  10. ? Project name my-project- T" Q) ]7 R" |
  11. ? Project description A Vue.js project/ k1 s1 A: \8 K4 i9 }
  12. ? Author runoob <test@runoob.com>
    ) s) h4 M) E+ X  E# a
  13. ? Vue build standalone
    8 W8 G: b1 N" ^: x- b
  14. ? Use ESLint to lint your code? Yes! V6 I; I1 @8 e* J6 |% P
  15. ? Pick an ESLint preset Standard
    ! [, T9 |' ~# g, G/ e, z$ d' f+ b6 t
  16. ? Setup unit tests with Karma + Mocha? Yes+ @" U6 \7 c0 {
  17. ? Setup e2e tests with Nightwatch? Yes( q* h2 o/ P$ P6 Y. U

  18. 0 l, j" D% [& _! _
  19.    vue-cli · Generated "my-project".7 a0 u  j; m+ }9 `" C$ E
  20. ( ?/ [, y& f: r* X# w
  21.    To get started:& |2 E; Y, a0 p% c5 r7 M
  22.    " r8 ?* {, n  n' e0 I
  23.      cd my-project) C5 U# w+ @0 m# J/ w
  24.      npm install/ x0 K9 t% l: X1 P. O. N
  25.      npm run dev1 w5 I4 o: w& q
  26.    3 A, ~  ?- q0 W% g6 ]8 Q2 p
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目，安装并运行：
  1. $ cd my-project: [7 b  H3 t3 Z; s6 `
  2. $ cnpm install  g5 g+ V2 `2 H8 Z! Z
  3. $ cnpm run dev* g; H: X+ ]) L; I6 e+ i% w
  4. DONE  Compiled successfully in 4388ms
    ; H  X9 o; k' I( S! x# T- q

  5. : f* Y. ?7 E8 I' t$ l# z; w' @
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：
% l! b: q9 h* n, p- L" ^# s9 [" c

" a4 E& L8 F+ _3 w* Z
9 [' A$ j6 Q! t4 g, ?2 ^( @5 W% P

& b7 ^+ [* l# p; H% `, G9 `



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