cncml手绘网

标题: Vue.js 安装 [打印本页]
作者: admin    时间: 2018-7-1 23:05
标题: Vue.js 安装
Vue.js 安装1、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
1 |" K, g$ o. Q# H" C4 f+ Q7 Q
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
/ }( `& G5 ^4 d' a1 R; f- V- s
3、NPM 方法
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
npm 版本需要大于 3.0，如果低于此版本需要升级它：
  1. # 查看版本4 {7 @5 Z: H1 P5 O
  2. $ npm -v
    7 z' }6 f+ K; |9 ?; O( w: P
  3. 2.3.0
    " U1 f/ i* @7 o+ N3 n/ \8 M. y

  4. 5 d( H) r: G2 a. [% ^
  5. #升级 npm% \# B) E2 Z+ m" N- U) `$ P* w
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装：
  1. # 最新稳定版9 ?1 j! j/ j% y9 V" H
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli$ S/ _- z5 T& l2 y
  2. $ cnpm install --global vue-cli- |$ L+ R5 x9 [" m* j& n) z- a
  3. # 创建一个基于 webpack 模板的新项目* E' ^' V  ~2 B( @
  4. $ vue init webpack my-project
    , V- N7 d2 c# Q1 @. M7 E
  5. # 这里需要进行一些配置，默认回车即可
    6 X( |# e# M1 g# S
  6. This will install Vue 2.x version of the template.
    % h2 d% T& [0 a; m. ^

  7. & ]# k+ \$ I1 d9 [, Z/ C+ Q
  8. For Vue 1.x use: vue init webpack#1.0 my-project- j  t; c  i/ ]4 M$ J
  9. # s9 X% k9 g& Y2 J( I
  10. ? Project name my-project- ~) Z' f7 J8 t9 t$ t4 H4 W# r
  11. ? Project description A Vue.js project) I  m" M( T( e& E2 n* s
  12. ? Author runoob <test@runoob.com>
    ) q# T: V" i0 c3 q2 d4 R" v' X  o8 W
  13. ? Vue build standalone
    6 ?' M2 V9 U- m( Y5 y, u
  14. ? Use ESLint to lint your code? Yes
    " h) o% h- T& z, E' y5 S% u
  15. ? Pick an ESLint preset Standard3 P1 P: N& t% q8 G) u4 h
  16. ? Setup unit tests with Karma + Mocha? Yes
    " K* z# I, ]8 s' U
  17. ? Setup e2e tests with Nightwatch? Yes1 c4 I/ o- ^# H- @9 n6 k

  18. 6 V0 G" b. w7 F! ^0 n
  19.    vue-cli · Generated "my-project".
    5 l0 l( y; ]% Y" G- e
  20. # T8 L; b, S+ g7 y$ C3 f8 O: I7 n
  21.    To get started:! @. `/ L. j: B/ k! d
  22.    
    + r3 n4 l5 e7 [9 H2 m# [7 x
  23.      cd my-project
    5 q- r% Z1 V* N# W) f
  24.      npm install% W% [8 N) @" l0 d% {1 y
  25.      npm run dev: s( w! `$ J/ V! ?3 f  ?2 L6 B
  26.    8 u9 [% ?" M$ L0 r
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目，安装并运行：
  1. $ cd my-project- T2 {  ~7 m: c: c
  2. $ cnpm install
    & A! T3 C5 p% M8 `2 ^
  3. $ cnpm run dev
    & g$ I, R6 B4 E, ~
  4. DONE  Compiled successfully in 4388ms( P. `) |3 F8 N5 N

  5. ) Y3 J8 z% I- e, q5 {
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

( r( T9 q. B8 @! z6 T, a& _
) g: b* W9 k) m) f2 ?1 T
& r+ i0 E+ A% ^. M' w% y7 f2 k/ l# v- c0 ^$ b7 N1 }, w2 U

0 N4 [5 K+ x+ {4 ^* w0 A9 B  f! U  E



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