cncml手绘网

标题: Vue.js 安装 [打印本页]
作者: admin    时间: 2018-7-1 23:05
标题: Vue.js 安装
Vue.js 安装1、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
- z, T( m! \4 P9 J8 y. h. a
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

; q% p2 }/ I6 e% v- C/ ~3、NPM 方法
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
npm 版本需要大于 3.0，如果低于此版本需要升级它：
  1. # 查看版本
    ) p" t: R; }5 ]7 Y% }
  2. $ npm -v0 a! Q4 [% l0 C4 A) Q- O/ ?: T
  3. 2.3.0: _' T. d# u& O7 t) z! q5 c) S/ z

  4.   G  d* x8 |# ~  g" w; U
  5. #升级 npm
    ! g: w3 d2 M6 `2 W/ ?
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装：
  1. # 最新稳定版
    1 ~% b1 i5 p" i* `5 W  `0 {! |
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli; E8 P+ a- p3 y
  2. $ cnpm install --global vue-cli
    5 T& ~9 S& }8 j8 a
  3. # 创建一个基于 webpack 模板的新项目
      J5 w+ w! l* G
  4. $ vue init webpack my-project
    4 m/ ~) b# X; X% l
  5. # 这里需要进行一些配置，默认回车即可! T3 T' n' \# r6 L5 {' W+ ?! G3 R
  6. This will install Vue 2.x version of the template." Y, f: O+ k, x6 U( X- u  {6 {
  7. ; e4 y3 {+ [7 d% s2 d% \  c9 Z
  8. For Vue 1.x use: vue init webpack#1.0 my-project
    2 P) u. |, o9 b/ `9 X: {

  9. # e' w0 o. C" h8 o* I
  10. ? Project name my-project
    ' P1 c) r$ q. _; Z. L
  11. ? Project description A Vue.js project
    , h. ?* k0 c; n5 \
  12. ? Author runoob <test@runoob.com>3 `( c9 p  r% v7 p) H1 P
  13. ? Vue build standalone
    ( s9 j  u6 h/ H
  14. ? Use ESLint to lint your code? Yes
    & J( B6 u, @* }8 n8 E/ e& ~1 n
  15. ? Pick an ESLint preset Standard0 ^7 h. |8 I9 k) |4 t
  16. ? Setup unit tests with Karma + Mocha? Yes
    ; Z5 o0 E. Y, r+ x
  17. ? Setup e2e tests with Nightwatch? Yes6 R- ?- ]% h0 g! _. q
  18. 2 l, ?4 L- x0 C9 u( ]
  19.    vue-cli · Generated "my-project".
    $ _0 H5 ]- F0 S
  20. 8 S6 }0 ?& b" y4 g
  21.    To get started:
    / {% w3 k: G$ D3 N
  22.    
    5 Q. K4 m/ ~& H6 C, f2 C0 \
  23.      cd my-project
    * l8 T$ e( j( ]- x
  24.      npm install
    1 \" `* X' F, ~3 Y/ ]+ k9 C
  25.      npm run dev( h- O! b* f0 n  A6 u, S3 ~
  26.    
    * `  A& l- k, A8 p+ ?
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目，安装并运行：
  1. $ cd my-project. R% r7 V# S1 P% ]7 ^3 E; K$ c
  2. $ cnpm install
    ' z5 W$ h, c0 k
  3. $ cnpm run dev$ a! G9 i5 R2 h5 {' L3 H0 T
  4. DONE  Compiled successfully in 4388ms
    4 ~. h, a  \  K; b% U/ k7 l

  5. % g1 i  Y  ~$ P( d0 I# a
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：
5 k: F; o  W+ n# ]- e5 ?
8 a2 B; d& q# h

* e/ O( l# y: Y9 b  Z8 _1 ~3 b/ J, ?; f

# c( p( H2 j$ O. u



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