cncml手绘网

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

. v* H$ P) z/ |! J' _( \, I
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

+ J% m/ ^, W" o3、NPM 方法
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
npm 版本需要大于 3.0，如果低于此版本需要升级它：
  1. # 查看版本& M1 C' W0 p' y: n- `. E
  2. $ npm -v
    3 h7 b; v7 e! O6 t. F5 @3 D+ e/ u
  3. 2.3.0
    . ~' T) |$ ^0 }$ k  X
  4. ; q7 Y. X/ l/ U) H3 S# T
  5. #升级 npm( _) N& G) n, t7 x
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装：
  1. # 最新稳定版
    ' j9 q1 E- D/ e& B
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli+ f1 _$ ~/ [, P# Q/ u0 F
  2. $ cnpm install --global vue-cli, X- G% n- G% Y: S
  3. # 创建一个基于 webpack 模板的新项目$ ~8 l5 F# @& T# _7 l2 I4 y
  4. $ vue init webpack my-project
    : N& j9 Y9 ~7 X( X- R6 B/ X
  5. # 这里需要进行一些配置，默认回车即可
    4 [0 U! c) y! B+ q; ]1 s
  6. This will install Vue 2.x version of the template.; ?5 {2 R/ `4 n: m* j

  7. ; f, d7 S, ^. ]0 O
  8. For Vue 1.x use: vue init webpack#1.0 my-project
    ) d* @4 B. f8 v: i, y

  9. & M! u0 Z0 _1 |; O- J* _
  10. ? Project name my-project
    % _7 u9 v3 @  D4 P: \: q
  11. ? Project description A Vue.js project
    " v0 [3 z2 z& o% W# _
  12. ? Author runoob <test@runoob.com>
    ( _4 K0 d; S1 c0 z+ J
  13. ? Vue build standalone! @4 ^% M2 Y0 g" o! b7 f
  14. ? Use ESLint to lint your code? Yes. ~, R! B  a2 a3 `, o& [
  15. ? Pick an ESLint preset Standard
    ' ^  h! E9 r( C
  16. ? Setup unit tests with Karma + Mocha? Yes6 I$ `8 O" i; J8 @) F4 b
  17. ? Setup e2e tests with Nightwatch? Yes
    . b% v! G8 a- K1 ]& s) T3 V8 P1 `
  18. / B& e5 y1 o5 t+ \& E# W9 g
  19.    vue-cli · Generated "my-project".
    / t' b8 A0 Y$ V4 Q, c
  20. " R$ i- y/ x, B8 D
  21.    To get started:
    ' y% v" V9 q' t' s+ L# j* d7 \
  22.    - p  y% a! b, o
  23.      cd my-project7 k0 e: |6 u3 N, i& q$ ^
  24.      npm install/ m( B  n6 r8 ^  k  z0 y
  25.      npm run dev% F, k  Z4 h) M; a1 [# w2 b
  26.    
    ! k( b: ~. x: r/ x, a/ ?" x1 x  m9 Z8 w
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目，安装并运行：
  1. $ cd my-project
    & O0 q. D: o) o
  2. $ cnpm install1 G& B& a  |7 u1 {
  3. $ cnpm run dev
    + T6 w$ ~/ Y9 L, j6 ?7 C- R
  4. DONE  Compiled successfully in 4388ms
    ( a6 T( @) [% a  b: E1 k" v; X: r- K

  5. + I" ]8 M# p. c5 `0 R
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

9 ?) N- |! @2 g* j
  Y; W# l% m: |2 N: ^2 d$ v' i
( F# W& y3 D( G! J" L% X* d& Q  n/ q+ {" q" ^! }. u
8 \, h# O4 X% H/ t9 E




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