cncml手绘网

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

) W% G7 j2 j1 g0 M- n/ T$ X* c
  1. <scriptsrc="http://www.w1.hk/jss/vue.js"></script>
复制代码
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
2 Y& _& ^+ j# N% a; I8 }3 \) }( M
3、NPM 方法
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
npm 版本需要大于 3.0，如果低于此版本需要升级它：
  1. # 查看版本
    2 t* {/ s' p* f2 d
  2. $ npm -v
    3 r' D2 i3 W& V2 d
  3. 2.3.0, T9 l) w( u4 o
  4. : I4 S* g+ L  l: |3 U
  5. #升级 npm
    . p" O. N, [6 h: B. v
  6. cnpm install npm -g
复制代码
在用 Vue.js 构建大型应用时推荐使用 NPM 安装：
  1. # 最新稳定版4 {7 O+ G* [5 a5 D) ?, O& a) h0 k
  2. $ cnpm install vue
复制代码
命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
  1. # 全局安装 vue-cli" `$ n: e) }) v% |
  2. $ cnpm install --global vue-cli5 I! F# L9 I- `7 z
  3. # 创建一个基于 webpack 模板的新项目
    * D" V+ r  ?( g
  4. $ vue init webpack my-project
    + `$ W: i" l& v0 w' I2 y
  5. # 这里需要进行一些配置，默认回车即可+ S8 \5 s- a0 Y/ y7 A
  6. This will install Vue 2.x version of the template.- h$ a  @& [$ ?# p) G$ r

  7. , g( C6 B  w' O% }# \/ i4 b
  8. For Vue 1.x use: vue init webpack#1.0 my-project+ I* T; j2 r, l; ^8 H. G0 g+ h
  9.   ?; ]; u5 e  H  u! ?( v& `$ x
  10. ? Project name my-project- u  ^$ K/ o2 Y' ~0 ]) w
  11. ? Project description A Vue.js project) t' @9 |* U7 ?. A6 }+ u- m7 r$ H
  12. ? Author runoob <test@runoob.com>% F" O) S5 X5 g3 L" {
  13. ? Vue build standalone
    ) V% {9 H0 {) e2 h  {" e. |# B
  14. ? Use ESLint to lint your code? Yes9 I- E) }( Y3 G( |& j7 F
  15. ? Pick an ESLint preset Standard) u1 t2 v/ {/ s
  16. ? Setup unit tests with Karma + Mocha? Yes
    : W2 I/ O) ]# d
  17. ? Setup e2e tests with Nightwatch? Yes+ @- X/ l) s" o# n" k! d6 f

  18. , P( V$ u8 u) G2 F$ ^
  19.    vue-cli · Generated "my-project".
    8 o. s! T; p  A- Q

  20. + a2 _( }3 a5 A% j- f- C0 x6 r
  21.    To get started:
    / {& n$ Z/ n) g3 ]
  22.    
    - B4 m$ ~! L' Z6 H
  23.      cd my-project8 _8 j0 T1 Y/ P! ]! S* W* n  o* \
  24.      npm install
    ; n2 O( }- L% {6 m, v
  25.      npm run dev
    5 ]4 a  T4 E8 G
  26.    
    / O6 B* O7 x7 v; ~9 W$ Q- r7 S8 m
  27.    Documentation can be found at https://vuejs-templates.github.io/webpack
复制代码
进入项目，安装并运行：
  1. $ cd my-project3 p; Y3 A" p! X7 f
  2. $ cnpm install( }' ^$ L  J1 y- V/ a2 [
  3. $ cnpm run dev7 J. @  h7 o0 e, {
  4. DONE  Compiled successfully in 4388ms% C7 h6 A. p; C% m$ z8 @

  5. / _  J0 R' z2 K. c7 \7 |
  6. > Listening at http://localhost:8080
复制代码
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

: [+ s$ f7 o7 {, v5 l( J8 k
+ D+ A7 Q7 b$ s; [( Z. {; p' i, [  r) @7 a' X7 O
& T& M  l) i! o0 v

' l! q1 z( J9 O) B



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