cncml手绘网

标题: Vue.js 安装 [打印本页]
作者: admin    时间: 2018-7-1 23:05
标题: Vue.js 安装
Vue.js 安装1、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
% }# {% R6 ^8 r# f; ]
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
& X& s: K9 j1 G8 y/ p8 n$ Y
3、NPM 方法
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
npm 版本需要大于 3.0，如果低于此版本需要升级它：
  1. # 查看版本& K4 F! T; q+ _* m, a3 V5 y4 |
  2. $ npm -v0 r( z2 L6 `& v- s, u6 j( G; Y
  3. 2.3.0
    : I2 R! d) L& {! f7 l
  4. % W: s. C- |8 A& G  N7 d% O
  5. #升级 npm. H! U% K1 o) h( o& j8 I
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装：
  1. # 最新稳定版! o. J1 n0 v& ?; n- x# @
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli# B- T. M  I( k0 ]1 w* F/ ~
  2. $ cnpm install --global vue-cli. d" v; S( i( w4 _0 z$ \* D/ p0 \
  3. # 创建一个基于 webpack 模板的新项目
    % Q) C& C- n7 d* M, g
  4. $ vue init webpack my-project
    1 R3 O' X: U  Q
  5. # 这里需要进行一些配置，默认回车即可- k' Y; e7 R5 T; q0 m+ v& d
  6. This will install Vue 2.x version of the template.
    3 d$ W" o" H3 i  f) G7 Q
  7. % l5 A5 l5 r- J& q' D+ O3 p" M. U
  8. For Vue 1.x use: vue init webpack#1.0 my-project
    ) f0 V# X7 I6 X% R' f0 m

  9. 0 X# }  ~; L- W; |8 M7 _
  10. ? Project name my-project6 h1 R% [- q0 K/ U
  11. ? Project description A Vue.js project
    ; B6 P, x) Y. x( S7 R
  12. ? Author runoob <test@runoob.com>1 g2 S" U6 R0 E# O9 I+ L) n' N
  13. ? Vue build standalone
    ) Z$ g) `) S0 @9 X. b# S- t) u
  14. ? Use ESLint to lint your code? Yes
    : P( L; G8 J9 ~0 Z- v
  15. ? Pick an ESLint preset Standard. x: Y6 g" e! C* X! Q, d$ ^2 w
  16. ? Setup unit tests with Karma + Mocha? Yes
    5 H# n4 r  f; c: c  P  r
  17. ? Setup e2e tests with Nightwatch? Yes0 h; U& f- Q! \+ Z
  18. 4 y8 K! z( _8 w4 a& x3 C: @
  19.    vue-cli · Generated "my-project".- V$ _4 B9 a' H' I, j
  20. 3 {, v; _; x- w$ Y
  21.    To get started:
    6 u7 w0 o5 @' K+ m" u. z! m
  22.    
    , K/ O/ W+ ?/ H. c6 c9 @! i
  23.      cd my-project7 u0 m. W: w5 _* ?/ e
  24.      npm install  @5 o8 h$ O/ j( f( C0 H" W7 V
  25.      npm run dev
    ( ?7 I, R0 t; f2 P* Y
  26.    
    % Y% d" E4 D8 y3 r
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目，安装并运行：
  1. $ cd my-project! H3 p, e4 {. D0 J7 ]: G( ?
  2. $ cnpm install, b3 G# M* i3 l$ B: V. ~
  3. $ cnpm run dev9 w6 }4 X8 r! ~3 z/ a& I
  4. DONE  Compiled successfully in 4388ms) n( ~  Q1 W6 o/ m; f8 p
  5. & k! B9 A1 B) G6 H: y
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

" Y4 U6 e* Z3 {" @9 p# I
# G7 e; w% z  y3 A; ?( Z) b3 L' x4 W

1 {& T8 b* n$ m5 o# e8 T0 m5 Z2 }  Q+ Z/ ]3 c) c' q# O! h9 X0 a




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