cncml手绘网

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

% ^. q. f+ i9 d/ n  |0 N
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

4 L. P- K/ b: T! g/ |: b6 e3、NPM 方法
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
npm 版本需要大于 3.0，如果低于此版本需要升级它：
  1. # 查看版本
    6 U3 v! G+ F/ s, `9 P
  2. $ npm -v
    % l* M+ D. t/ B; O5 k/ V7 Y9 t& c
  3. 2.3.0: h& v8 M( n3 @! I; q$ u
  4. ( F& ?& j: u* o" f6 M: V
  5. #升级 npm7 B5 ~3 V6 \. @' c! R' c1 n
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装：
  1. # 最新稳定版, n' `& f" ]& W' A' i
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli3 n: K- A6 P% ]2 l! m( t$ P" O( z
  2. $ cnpm install --global vue-cli
    / I2 C# a* M/ Y$ Z
  3. # 创建一个基于 webpack 模板的新项目0 k4 d% n- D; H  A2 n2 q* A0 `
  4. $ vue init webpack my-project, f, k; A6 G$ b! U2 w. e
  5. # 这里需要进行一些配置，默认回车即可8 t, H3 t, ]7 S3 m0 q0 k/ N: ?
  6. This will install Vue 2.x version of the template.' ?+ E$ Z/ R" E* p$ _8 H

  7. 4 W4 S4 f* \0 x4 v, Z4 I. H+ n
  8. For Vue 1.x use: vue init webpack#1.0 my-project* o, S2 @9 r3 ?( ^
  9. " D7 a" `, V; ~
  10. ? Project name my-project
    6 N7 t. @1 l( n7 {6 I& |* l
  11. ? Project description A Vue.js project
    3 Q, |& o* h+ P3 ?4 x9 H
  12. ? Author runoob <test@runoob.com>! d( I: N1 c, C0 f( e( D" b- N3 b
  13. ? Vue build standalone
    ( l/ T" m1 `5 B" u' m; ]
  14. ? Use ESLint to lint your code? Yes* `4 l8 y8 Y* D1 F+ @
  15. ? Pick an ESLint preset Standard8 G" `) x$ `2 z) r+ n" v
  16. ? Setup unit tests with Karma + Mocha? Yes6 i6 Z8 w0 g( y7 T4 x$ b7 i
  17. ? Setup e2e tests with Nightwatch? Yes2 _- p1 {: Q6 {9 x% J5 c

  18. - b1 w8 I) Y) p% i( L
  19.    vue-cli · Generated "my-project".
    / j, o; \5 D( ^$ R1 J2 n  W, o6 Q

  20. + u' k  o6 C5 Y  A
  21.    To get started:: [, P$ {; R: p  K
  22.    
      N! q  }/ J. R
  23.      cd my-project
    . e5 P$ b& d; m- y
  24.      npm install3 i! D3 h9 u" H) \% g/ a! i( Z
  25.      npm run dev
    ) B8 b' q" Y1 o% t5 e( `: q
  26.    
    , M% a3 o( v9 g+ A
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目，安装并运行：
  1. $ cd my-project
    ) e; g8 g* P& D1 a( i. M$ T2 f
  2. $ cnpm install
    ( O; {- ?7 l$ D* |' R' M
  3. $ cnpm run dev
    ) }. H/ ~% l! y3 X+ E1 v1 T
  4. DONE  Compiled successfully in 4388ms& q/ w! G3 j4 E
  5. . R3 M+ M; F& E. a6 _2 j  h3 R
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：
* T* G$ P; c( M, A, u) l" R' b' i

' q! y% ]- \$ G: g  _2 ~: s, x4 @( `% ?  w( p: F

+ \: @' H# {& D9 j0 W- \9 {# }% d
: Z+ _& v) D: V9 D2 }3 y0 ?



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