cncml手绘网

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

. O1 h; Z6 c0 _5 F+ A7 k9 D) G
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
% X6 v* G. M; t0 S
3、NPM 方法
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
npm 版本需要大于 3.0，如果低于此版本需要升级它：
  1. # 查看版本
    - w* |2 \$ f$ M) _3 f( {/ z9 t8 n
  2. $ npm -v. }0 A2 W/ e) ~8 i5 [7 M* x
  3. 2.3.01 K' V" N5 s# i; b6 T

  4. 5 ]' X: j& V$ s5 W+ H, i) w
  5. #升级 npm
    7 e4 i0 B% E6 y5 W% r
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装：
  1. # 最新稳定版
    1 J7 O+ U" h& t7 M: S
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli
    * x+ `) H2 `" O; j* ?
  2. $ cnpm install --global vue-cli
    # ?$ [$ s" U% u  q$ x4 }: ~
  3. # 创建一个基于 webpack 模板的新项目+ S) i; U4 K, K9 {
  4. $ vue init webpack my-project
    2 r( }0 b) {4 [  i" y' ?5 j  ~# s: |
  5. # 这里需要进行一些配置，默认回车即可
    " Q" z1 I2 P; l+ X5 ~8 Y7 }3 c
  6. This will install Vue 2.x version of the template.% v" {0 i! o$ l2 n6 Y& N

  7. ' V( s4 J' i. S1 D7 L8 e  l/ f" j
  8. For Vue 1.x use: vue init webpack#1.0 my-project7 S" b5 b* e4 k6 N, |& ~

  9. ; j- G7 P4 S) Y
  10. ? Project name my-project; J6 M$ l. b5 g/ g
  11. ? Project description A Vue.js project0 n: F0 K  V. v' U6 o9 W. Y) l
  12. ? Author runoob <test@runoob.com>% H3 D0 O0 V5 c
  13. ? Vue build standalone
    . }- Z. \, M$ D& O& X3 t
  14. ? Use ESLint to lint your code? Yes
    ) U: Y0 Y! G/ Y, r4 G: M
  15. ? Pick an ESLint preset Standard6 o9 Z+ j- w4 ]8 l
  16. ? Setup unit tests with Karma + Mocha? Yes
    + |! r/ }  C, Q( h
  17. ? Setup e2e tests with Nightwatch? Yes; B- B8 F0 t7 [# j$ I' @8 T/ k
  18. $ {, ^, P, F' E" C* U8 |4 i9 m. a. E
  19.    vue-cli · Generated "my-project"./ i5 g( O. i! S- i" w: X- v
  20. + \7 p  r0 w. x2 d6 Z2 p& j3 u8 O
  21.    To get started:. _- ?( A' a6 K7 U9 o, D! W5 }
  22.    4 f0 }0 ~1 I5 x; l" h
  23.      cd my-project
    & A- t4 I( {6 D% h. j: k
  24.      npm install
    ! @# N; i6 K+ e/ ^! P  }
  25.      npm run dev
    3 F4 S5 x$ E3 x0 k- V- A
  26.    
    1 Q6 D/ u; Y3 ?  `1 p7 c, o
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目，安装并运行：
  1. $ cd my-project
    ; t7 Z  S0 ?: A5 P3 E+ \
  2. $ cnpm install
    1 o9 k( m- a9 p& m, m0 ^
  3. $ cnpm run dev
    8 P  ^$ L  {$ W. k4 S
  4. DONE  Compiled successfully in 4388ms, Y: s; \& R. B( H- U; w7 `  `$ Z
  5. / P# U  ^$ m. E; \3 p! C
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：
* A' z8 i& v6 }6 w
. Y* Y# V8 F% w, C

# w( N! x3 Y0 P. J1 B$ W6 F% ~9 ?9 c6 I& d6 j2 u* L0 H

: \: p! h5 m  s, T7 o



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