cncml手绘网

标题: Vue.js 安装 [打印本页]
作者: admin    时间: 2018-7-1 23:05
标题: Vue.js 安装
Vue.js 安装1、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
& o, V- ~9 z$ K4 P
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
* t: _, C* \. H) c
3、NPM 方法
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
npm 版本需要大于 3.0，如果低于此版本需要升级它：
  1. # 查看版本4 t6 c+ C8 o3 x2 e# J
  2. $ npm -v1 e% G; O; a" M& i
  3. 2.3.0' v% k- O6 W4 a8 v  h9 r

  4. 7 R4 P- S2 t, o7 [7 B$ s8 O1 {& S
  5. #升级 npm' |4 v* W2 ?* z
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装：
  1. # 最新稳定版* ?7 u0 d0 W; h: y# V; B  Y
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli
    % ?: N- {. q& W* C; `, A
  2. $ cnpm install --global vue-cli) ~; V1 M; @* W  N; k9 C; ~& X
  3. # 创建一个基于 webpack 模板的新项目
    / f" j8 `6 h: u8 V9 s7 y0 p8 r& ^7 L
  4. $ vue init webpack my-project4 x6 M  V0 H7 Q! [
  5. # 这里需要进行一些配置，默认回车即可, H, K# s# m& I) k: {: j
  6. This will install Vue 2.x version of the template.# k7 ?7 O/ x; z8 w: M$ E
  7.   V7 P/ s' ~+ _
  8. For Vue 1.x use: vue init webpack#1.0 my-project& s" Q# j0 g' Z: g% S- \7 b: q% B

  9. # Q, J0 X9 I, U" y, J0 F1 P- G
  10. ? Project name my-project, d& J+ h8 d% w) k
  11. ? Project description A Vue.js project
    4 v7 g  t6 H3 L( Z; [& y1 S
  12. ? Author runoob <test@runoob.com>
    ) K" A. F. u0 s* Q9 a2 B
  13. ? Vue build standalone4 f8 W6 U: u2 a6 N7 F) b: G
  14. ? Use ESLint to lint your code? Yes2 m0 {/ l9 O. L' x9 v0 Q
  15. ? Pick an ESLint preset Standard
    7 \, p. s2 _2 k+ I8 M  G( S, g5 d
  16. ? Setup unit tests with Karma + Mocha? Yes2 W6 G' I" F! |. a0 y
  17. ? Setup e2e tests with Nightwatch? Yes
    ( w, k) x! b6 I7 h8 e
  18. , W$ H8 |  c; \6 }
  19.    vue-cli · Generated "my-project".7 _$ |. T! c) K
  20. 5 c: v) o( G% g+ w3 [+ a
  21.    To get started:
    + W% T8 E0 `) e1 ~) r% O: j/ b
  22.    & e7 `8 P5 q3 A: J# N
  23.      cd my-project
    6 X  `( Q) R5 \) {% D* M  L0 q  L
  24.      npm install! P3 M: x2 h2 F8 X* x) y5 E
  25.      npm run dev
    ; Z& E  |( O5 H
  26.    . C' F+ R7 l9 k9 ?# c7 z) Z7 P
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目，安装并运行：
  1. $ cd my-project
    , B0 _! c4 G2 k
  2. $ cnpm install
    5 y( G, t% l5 w$ b0 ~! M3 P. b* A
  3. $ cnpm run dev2 X3 z) p; i6 W3 j7 `8 }
  4. DONE  Compiled successfully in 4388ms2 Z) h- x5 _: v% j4 ]1 P6 |

  5. & e7 j* C7 _4 P2 K
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

; Q; G( w' q. B& n/ j. D1 x" F; L3 J1 t4 ~' g
1 o* T$ O1 B+ Y$ }3 u$ C2 J

2 d  a8 s; S# j7 ~. H/ S' d$ I) t# ~  p




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