您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 16323|回复: 0
打印 上一主题 下一主题

[Vue.js] Vue.js 安装

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-1 23:05:46 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
Vue.js 安装1、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
& p& `/ X6 j- e' D* m( W1 z4 U+ v
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。

$ c( f8 r5 Z8 `
3、NPM 方法
由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像
npm 版本需要大于 3.0,如果低于此版本需要升级它:
  1. # 查看版本' N2 d# @9 N: O. }" c
  2. $ npm -v0 {7 s8 f2 R4 l4 I
  3. 2.3.0
    . m/ u, L4 P3 l  L! N

  4. 7 j. q  w% Z( N) N2 B
  5. #升级 npm1 H( T( V7 X% t/ Y$ H) p; d( S
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装:
  1. # 最新稳定版, D1 X# x6 D1 g- R4 Y" T+ r
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli
      F" r- e) K7 \: w) A: L4 \+ @- I
  2. $ cnpm install --global vue-cli: N* `& L% f7 T5 B  ?
  3. # 创建一个基于 webpack 模板的新项目
    ( d6 _8 W+ E: m" W8 v* f3 h
  4. $ vue init webpack my-project1 c: C6 [* c& ^( q" G: `2 ?
  5. # 这里需要进行一些配置,默认回车即可8 C' h/ _4 E; a9 ^2 g3 }
  6. This will install Vue 2.x version of the template.
    . {  Z- [( m2 W8 X+ P

  7. 3 P/ k6 S3 @$ b
  8. For Vue 1.x use: vue init webpack#1.0 my-project
    1 W: r" z& Z2 e
  9. " r. f$ k: t0 V; e9 A1 U+ y1 q
  10. ? Project name my-project
    - G: r* R6 g+ A
  11. ? Project description A Vue.js project# d7 x9 S  R( F1 E
  12. ? Author runoob <test@runoob.com>4 m1 V% O/ ~6 U' i" H: P
  13. ? Vue build standalone
    . O2 r7 `3 o, q$ {
  14. ? Use ESLint to lint your code? Yes; @& f5 A' @- v# p4 S; m
  15. ? Pick an ESLint preset Standard) Y) Z5 A* I3 o
  16. ? Setup unit tests with Karma + Mocha? Yes
    6 q* u7 E4 ^  e% A! z2 t
  17. ? Setup e2e tests with Nightwatch? Yes
    2 _( F# z8 \) D5 P1 q& k

  18. # q  g3 h' o$ c, n
  19.    vue-cli · Generated "my-project".( }  _1 @% W- k
  20. 7 U7 T$ f: ?/ @5 R% B* P+ u2 l
  21.    To get started:+ [, G7 C, {1 u4 j8 c0 a
  22.    % F3 }' C% ^, A6 A* W
  23.      cd my-project0 g  E% a- v5 E
  24.      npm install8 G5 J9 j* w( `! Z' C2 Y- C
  25.      npm run dev
    + G. d# g: X+ c3 I0 k+ H: ~  R
  26.    / M0 i% |! R/ t) {0 u
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目,安装并运行:
  1. $ cd my-project
    & \7 O9 e$ V  z& r) l: V
  2. $ cnpm install
    ! m5 L" G" _3 O6 d
  3. $ cnpm run dev
    - n  l$ o' s' l  `7 _
  4. DONE  Compiled successfully in 4388ms  n1 j: T4 O6 e, z3 D
  5. ) V4 T/ L1 J% p" _; L4 H& G, @
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:
/ G( m! W, j$ T/ s3 M5 q+ P* B+ ~

. t$ r4 X: B* Q/ ^8 x; e# W4 p+ B$ b6 l/ P$ z& E- l1 d  B. T( T6 g
$ r  a# s' x4 |$ O2 m$ Q) O" u0 Q5 i/ [
( s* J0 a1 ^6 M5 z4 k  h, v
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-9-21 03:13 , Processed in 0.064455 second(s), 22 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!