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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[Vue.js] Vue.js 安装

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-1 23:05:46 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
Vue.js 安装1、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

5 y! d# i: H3 i( y
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。

" R0 P5 v3 g. p5 g' i
3、NPM 方法
由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像
npm 版本需要大于 3.0,如果低于此版本需要升级它:
  1. # 查看版本, B& S- k5 Y0 g: ~2 I
  2. $ npm -v
    5 E2 D. j1 t$ U- B- l0 _
  3. 2.3.0
    0 `- l8 x* k; {7 k, D* R
  4. $ Y- j+ U& v+ i- A, L8 w
  5. #升级 npm8 y  B; ^* Q$ O4 C4 G
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装:
  1. # 最新稳定版
    4 Z* L( W6 ^5 d) c
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli
    / \. n, z. M6 |' _6 c) o
  2. $ cnpm install --global vue-cli
    , j# {  p% Y# ~  f) H8 i" f6 W
  3. # 创建一个基于 webpack 模板的新项目
    % r! X5 i1 F0 z
  4. $ vue init webpack my-project* Z& E% c: C2 ~- i0 e! q
  5. # 这里需要进行一些配置,默认回车即可, v8 J- X$ G. n/ _. Q
  6. This will install Vue 2.x version of the template.
    ; z; Y( Q! @, p( O8 {
  7. 2 k' A% ^7 X4 K6 S$ |( E6 H! t1 @
  8. For Vue 1.x use: vue init webpack#1.0 my-project
    . Z7 a3 }4 d: I1 q: u

  9. . k# z! u; g. u/ b) S
  10. ? Project name my-project. Z. N/ X4 \6 H
  11. ? Project description A Vue.js project) i. O7 c- i. E
  12. ? Author runoob <test@runoob.com>
    6 o  `( W1 j6 d( ]& U/ H; A
  13. ? Vue build standalone: V: b8 B% W3 A7 f2 I) X2 ^
  14. ? Use ESLint to lint your code? Yes  s, V( @. u1 z" ?& q: p
  15. ? Pick an ESLint preset Standard4 R' L5 k( I& X
  16. ? Setup unit tests with Karma + Mocha? Yes
    ( a3 b& U1 A2 @7 B, @4 n* \% d5 o
  17. ? Setup e2e tests with Nightwatch? Yes
    - y* ?" a0 ]: x+ _" N

  18. : j6 y* T+ ?7 l7 }9 x8 h! }% p
  19.    vue-cli · Generated "my-project".! B# f5 J  o/ z3 y6 O' \

  20. 9 \- s& D6 @3 A! ?' x/ R# N0 J
  21.    To get started:
    " ^% v( |, z3 |, u8 |
  22.    % e3 j7 M" }+ x
  23.      cd my-project
    . D! R4 i2 h/ w5 i5 s
  24.      npm install- X* X- ^. Z" R3 K# o  [
  25.      npm run dev) S% q3 W$ p  y* A
  26.    " m" x" d" K) D1 ^* h, h2 d) P. A% s
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目,安装并运行:
  1. $ cd my-project8 [  L. T0 ]2 y/ m0 P+ |* v
  2. $ cnpm install
    * c0 p; \1 v3 H) E& m* U. L' L+ G
  3. $ cnpm run dev
    3 v- s/ K! r& E1 o' p
  4. DONE  Compiled successfully in 4388ms# q* Y4 @) ^/ b$ ~  y2 ~
  5. : q* Y: F- ^* Z& p' y% _) X
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:
* c& v; R. A6 o$ m* f+ o6 V

1 |4 _. l5 u- _' ^9 R2 e* |& u
8 P, p) g, W. M% k
+ z, u) H4 K3 Z1 s- }* y; L8 u( i3 V  Z+ s( x
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-6-20 03:11 , Processed in 0.057710 second(s), 23 queries .

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