cncml手绘网

标题: Vue.js 安装 [打印本页]
作者: admin    时间: 2018-7-1 23:05
标题: Vue.js 安装
Vue.js 安装1、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
$ n; x. `  i) B( R2 F
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
* l( ^6 F& L- R# |9 Q7 n) ]
3、NPM 方法
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
npm 版本需要大于 3.0，如果低于此版本需要升级它：
  1. # 查看版本1 e$ g% O: r, e7 r
  2. $ npm -v, Y9 w6 B+ {0 H  O4 T# e
  3. 2.3.0  N* |+ v6 X2 B8 A, k9 C  ~2 n% Q* Y4 s
  4. # a4 L* A' u9 ?8 Z
  5. #升级 npm$ f3 U4 G7 m! w" w/ r% t
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装：
  1. # 最新稳定版
    ( `( ]$ S7 {5 B/ P
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli# a: ^: `3 ]4 ^0 Q7 u
  2. $ cnpm install --global vue-cli
      M: f! ^/ P! U* f; ^
  3. # 创建一个基于 webpack 模板的新项目
    $ d! [, C  ^% V" {$ r3 k/ n8 q$ E6 Q
  4. $ vue init webpack my-project
    0 ?: r% x+ n9 p/ M, ?, P
  5. # 这里需要进行一些配置，默认回车即可, W) [% k1 p) L& z& O/ D
  6. This will install Vue 2.x version of the template.& E8 w' e3 g/ @3 r0 N1 K

  7. : n( e) g4 [3 s5 p4 }5 i
  8. For Vue 1.x use: vue init webpack#1.0 my-project
    ( D* d5 _/ J# u8 v$ a) h1 a
  9. 3 E- P8 G% j2 g' Q1 `4 e
  10. ? Project name my-project
    . J- \: w/ j+ S/ a* x
  11. ? Project description A Vue.js project* Q' [7 X  P8 ~  M- }
  12. ? Author runoob <test@runoob.com>
    * C/ z# \9 Q! H
  13. ? Vue build standalone
    - y/ {% a7 E  x+ O
  14. ? Use ESLint to lint your code? Yes
    0 P& }6 Q) Q5 b# u2 v6 E
  15. ? Pick an ESLint preset Standard
    # k* P# M+ R/ i: ~0 l" E2 z
  16. ? Setup unit tests with Karma + Mocha? Yes& Q) U( `: K' t. j' n! m2 \/ y$ s
  17. ? Setup e2e tests with Nightwatch? Yes6 V3 n( U; A* H- g  v6 S+ |6 j

  18. ) U# }; s( O  d, J' c
  19.    vue-cli · Generated "my-project".* M# a4 o: V7 z* U

  20. . ~: U- _- E9 ]8 ?: a8 m6 X
  21.    To get started:
    % |9 h, E- |$ Z8 A" [% i
  22.    
    ) c7 f# t3 e2 R$ B+ ?: [
  23.      cd my-project
    , {! M/ q: T) ^. N- `9 g
  24.      npm install4 H* O# N5 Z( Y; Q* A7 G
  25.      npm run dev
    6 p" T+ @8 j* T$ o
  26.    ) ]. S' ]  H+ u: s/ j; Z4 t/ W
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目，安装并运行：
  1. $ cd my-project
    % D3 i/ R0 _  I% J# c1 t
  2. $ cnpm install
    8 A* q, D4 R% p9 V- T5 T1 @% a7 @
  3. $ cnpm run dev# A; Z$ x: f, [2 m. z9 K
  4. DONE  Compiled successfully in 4388ms
    ' ^# e2 r4 z' L0 {" p8 q" ^
  5. 0 X, R7 ^: V& U9 y: l8 t; i* M' R
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：
5 a+ v4 b( B2 i9 C; E! Y' m: d

2 A  l; z" f: R- J! h8 J+ ?3 G1 S1 B) L& [

0 l- ~; [$ |% l& ^% Q
  m/ `4 a1 P- M. B



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