cncml手绘网

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

# l. z' v+ L- i% W4 u
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

+ ?0 C  ~/ ]$ t. g0 ?0 h  v3、NPM 方法
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
npm 版本需要大于 3.0，如果低于此版本需要升级它：
  1. # 查看版本8 i1 l, a$ N* I6 x, q5 f
  2. $ npm -v
    5 ~/ e7 I$ j* a; ~6 o' ^
  3. 2.3.0' }: `1 A; m: e+ Z! p+ e, p

  4. % N4 Q& }) c" p9 M& R. A7 y
  5. #升级 npm
    5 ~* @' {0 P0 @
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装：
  1. # 最新稳定版7 F& K/ E4 V$ B0 e  ?3 O' Z
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli6 s# b: }. E, d
  2. $ cnpm install --global vue-cli9 C0 [/ i7 k, I- ^9 f1 w9 z/ q
  3. # 创建一个基于 webpack 模板的新项目/ ^+ }4 D* `( B& D& J
  4. $ vue init webpack my-project
    9 ?' U/ [% X& {; A$ y
  5. # 这里需要进行一些配置，默认回车即可6 Q; v  o5 E2 E4 Z4 f$ e
  6. This will install Vue 2.x version of the template.. p, G- i" f  @: Y1 S

  7. 5 F: n- G7 p# ]( O
  8. For Vue 1.x use: vue init webpack#1.0 my-project
    ! Y4 m7 g7 K8 ^: P+ i  M$ N. t

  9. ' m+ m. `" I+ f: ~! K+ n: g" t& u5 e8 S
  10. ? Project name my-project
    / X# c$ p& x- \
  11. ? Project description A Vue.js project
    . i8 n) g; u, U" W% E9 Z
  12. ? Author runoob <test@runoob.com>
      m9 _$ Q! g- P' H6 v( ?+ P5 A
  13. ? Vue build standalone2 v+ r0 Z+ o+ [% d* j; r! Y4 d
  14. ? Use ESLint to lint your code? Yes
    ' f! k3 V- W3 s! |! k
  15. ? Pick an ESLint preset Standard" f6 D1 F8 i2 v  e) D
  16. ? Setup unit tests with Karma + Mocha? Yes
    . M6 s. e. x6 W) V8 c1 O5 n0 g
  17. ? Setup e2e tests with Nightwatch? Yes
    9 Y" Q6 }; h$ [$ d. O9 I: ^; U
  18. 1 K' M- c/ n) O, R  X2 Z* F* W
  19.    vue-cli · Generated "my-project".5 l# k6 a! P" y; h* z. U- \
  20. 8 S8 T3 e: y5 w& a* P4 Y# R
  21.    To get started:3 F7 e% j4 u2 M* V
  22.    ' A; C. V  N6 p& N. w# q, {
  23.      cd my-project. \/ M# L9 L; u9 l, c8 }) J+ `
  24.      npm install
    3 A6 t* b* L5 U! d4 ~4 i5 Q7 q
  25.      npm run dev
    1 e' h3 q/ ]1 e/ W8 h) o
  26.    
    4 O' `% h8 `; ^3 }, `0 f  L
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目，安装并运行：
  1. $ cd my-project
    0 G1 }, S7 o) }5 p6 q# {8 b- j
  2. $ cnpm install
    % N. ?0 M- _) N6 P
  3. $ cnpm run dev/ x3 Z2 `# r4 ~) a) F
  4. DONE  Compiled successfully in 4388ms
    5 J4 A) F4 J& ^3 u1 s
  5. * H/ {$ K3 p3 {4 E+ W
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

/ ~( ^/ I$ m3 O) d
7 C/ ^" W+ t0 N, n7 z( G9 Q/ _4 R
) T/ n) ]. ~& C
0 w9 e8 i9 B- N( Q* C& m
  a6 Z  S/ f( [" I1 I# a



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