cncml手绘网

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

: ]  ^% V7 l1 [/ o0 F  t
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

3 T) N) k0 R0 m( S  X0 s  }! I3、NPM 方法
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
npm 版本需要大于 3.0，如果低于此版本需要升级它：
  1. # 查看版本
    , |5 I. `' Y. A0 Q% N
  2. $ npm -v
    5 W! ~) {% J% O3 _
  3. 2.3.0
    5 n) d" Q1 I, D& l8 D

  4. " Z- [  m+ l- z0 T& h$ s% k/ Q
  5. #升级 npm
    + [# d/ d' t, t5 d  m8 R, `
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装：
  1. # 最新稳定版' }' X- _( U% a* t- r- ~
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli
    8 f& T6 R+ @/ n3 A
  2. $ cnpm install --global vue-cli
    7 @- z' }, z4 Y- J  r- X
  3. # 创建一个基于 webpack 模板的新项目
    4 c/ c, z& [5 J
  4. $ vue init webpack my-project
    ; t$ c. N% s# B3 n( O+ v' a$ d( _
  5. # 这里需要进行一些配置，默认回车即可, ?1 h+ K0 p- ~4 V
  6. This will install Vue 2.x version of the template.
    6 x7 U/ c( e6 v6 O6 M3 q
  7. 4 l' e0 ^8 W& Z  B/ d' L
  8. For Vue 1.x use: vue init webpack#1.0 my-project
    * L8 [1 Q6 D, Z2 i1 f8 q
  9. / J5 A, Y2 @" ~+ i
  10. ? Project name my-project
    % h) x8 K) T, u
  11. ? Project description A Vue.js project
    . {, Z, U4 F' V& u6 {
  12. ? Author runoob <test@runoob.com>
    5 G6 V  W4 T. Q
  13. ? Vue build standalone6 a# l' Z+ U4 I6 z
  14. ? Use ESLint to lint your code? Yes% q- X: T2 E9 s
  15. ? Pick an ESLint preset Standard
    % j+ J0 X: @8 }! z+ k- }3 l; t& H% s
  16. ? Setup unit tests with Karma + Mocha? Yes7 {" k. d3 Z  I- T4 R$ k7 k
  17. ? Setup e2e tests with Nightwatch? Yes1 M* P/ \. g* A
  18. # \3 E% q/ K3 O, S4 K3 O& O# ^
  19.    vue-cli · Generated "my-project".3 k' W3 Z$ w; ^* D
  20. * z9 O( _/ D" i+ {! o
  21.    To get started:, j# ]% c3 H- R  j/ i
  22.    
    - F4 F; |. b9 v1 T& H
  23.      cd my-project* Z/ D; r0 a/ b3 A0 a
  24.      npm install0 K2 e' l! @0 J/ y
  25.      npm run dev# F, f- V. ?* R/ f" A
  26.    
    1 {5 I& L7 U6 [( k; L1 Y# d' H* M4 F
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目，安装并运行：
  1. $ cd my-project) `1 }1 L1 h7 w% z: C2 b
  2. $ cnpm install9 }$ p+ m8 q6 y/ H; y
  3. $ cnpm run dev  b# e- V/ o. f
  4. DONE  Compiled successfully in 4388ms& L" T. s7 S; y: O' A4 `, v
  5. 2 _5 k1 E% |0 o9 I& w  D- A" }: m8 U$ e
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

) ^0 J' K3 u" E1 Z: ^2 b$ s
0 k7 t& c# H/ A$ L# t8 i. b2 u* R  f/ }* l. g

! ?/ M3 p* U/ ]6 z' p
+ Q1 f, d; u* A( d3 `



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