Vue 前端开发配置步骤---自学手册

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
& @/ V' B* g1 |& {( L. c, K
9 }2 V' ~, |7 w/ o- M$ |（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

（2）安装Vue 脚手架
. D: |2 ?* o' P2 k7 O1 a8 N>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目

# @6 S8 ~& n8 Q6 _. h6 mvue init webpack vue-plmhome01


/ s! J5 N/ g- ^* p(4) cd /d D:/webdev/vue-plmhome01
- W# K$ `# H5 e* Q% D如果报错，再运行下 npm install
) p/ Y% p: x& {! Q( D! i0 q- k
npm run dev

" n5 k6 ~% n2 a& s/ r- A* n0 Y
& d7 T: \' w9 h7 q0 n+ X
$ G) i+ p$ u) a
7 J. T, ~) A+ i- ]
% A# N5 p' A. c还有一种简单的做法
8 U" b: f( _3 c6 H/ H- d
# f. O, H7 Y, l! Y, S! \vue init webpack-simple vue-plmhome02

- x( r: c2 k, c. m. G目录更精简些

admin

新版本安装
$ ?$ n7 Z5 Z5 m, M  [: Q- z3 @
卸载老版本

% F# x/ K6 }$ S, h( T9 |1 C! ]npm uninstall vue-cli -g
  N" j- O. \9 ^% R! ?* o& W
1 }3 V$ L9 L  R; b) ~# F3 h6 A安装
  X4 P4 q( P: v/ Y7 o/ D
8 B2 i) W  V" E+ |9 fnpm install -g @vue/cli   

  [7 e- @, @6 T' K4 g5 w5 {
' t& [0 e8 `' O/ Q6 ~vue --version
; I% ?" g, h! `3 s; n1 A+ j! v' a3 u
9 K, m1 L" z3 c0 S
) Y, p6 L) E5 t3 R! A3 T/ l; ivue create vue-plmhome02


* X) ^3 N- X# tnpm run serve
7 t+ F2 J+ Q9 B4 P
6 @5 f, b; f6 u, e






! N2 c( D0 h2 o1 q# Q/ I- T. I3 r

admin

第一个例子－－－基本数据的读取

; k' F5 Z; A9 ^$ q2 G0 Y4 y

<template>

  <div id="app">

  <!-- user constant Value -->

   <h2>my test vue </h2>

   <br>

   <!--Use the data value-->

   {{msg}}

   <!-- Use object vaue -->

   <br>

   <h3> {{obj.name}} : {{obj.Age}}</h3>

   <br>

   <!-- interate the arrary -->

  <hr>

<ul>

  <li v-for="item in nameList" :key="item">

   {{ item.message }}

  </li>

</ul>

  </div>

</template>

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

<style>

</style>

admin

数据绑定：
  i/ S6 o4 W# f! u! ]5 r
7 A# d; i9 t% G1 M+ u; }
<!-- Bind Attributes -->
6 ~4 }. K! E- s<br>
$ r+ C  A' t4 h8 t2 }9 u9 ]<div v-bind:title="url">
  "This is for the url bind"
* I: F  }9 B/ V4 @" L+ ?0 I& D! Y" l</div>
' O3 \, K0 p+ ]+ L( Q<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
# ^3 N; @$ V0 B</div>
<!-- Bind Text-->
' I% t1 J! t: E<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
5 j6 k: i( L; v8 g$ L4 b

admin

数据绑定：


% Z! b# A- C4 r<!-- Bind Attributes -->
- l% q6 B7 h* Y" ~<br>
  G3 P- P8 T1 B* K" p. `<div v-bind:title="url">
  "This is for the url bind"
% S2 J& r' J; q3 m) a* W</div>
<img :src="srcurl" alt="plmhome logo">
! w( p7 [- N$ d* b5 z5 H<!-- Bind html -->
; ]5 l6 V9 M# M( c7 n) P, ?& u<div v-html="html">
' Y* e0 F: m- b6 T4 U' l- D6 N</div>
: i% l/ R+ ^& ^  G# n2 d$ N<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：
3 h, C. T2 x' [, W. q
9 `9 Y4 n9 J! ~2 o& t
- L$ K; [2 E+ f( \6 e<!-- Bind Attributes -->
<br>
1 S* m( Q/ E: r) L2 r" |<div v-bind:title="url">
  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
* B# `3 F+ n% b7 _<!-- Bind html -->
% J' M! o/ k% b& M% n) _1 i4 Y8 L<div v-html="html">
</div>
( j/ H. O4 T) S7 `# t; B4 c/ E3 b: S" w<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
8 X( s7 b3 ?; v9 f. A</div>

admin

数据绑定：
7 s2 l) A. ?, `0 w
1 u9 g9 N5 r, q, h% D
* X. W- x# E' \0 |' m6 m<!-- Bind Attributes -->
/ E" h/ C5 y) V* r<br>
: b( r$ P9 `. u<div v-bind:title="url">
. H7 T  T0 X+ H* A. C  m% |  "This is for the url bind"
</div>
( R) o6 R( J. [5 {; D<img :src="srcurl" alt="plmhome logo">
3 a3 G. \. `" c* u<!-- Bind html -->
& X- C% T  m2 J<div v-html="html">
+ D6 r6 T& O0 q0 x</div>
5 E5 ]7 x9 K- m<!-- Bind Text-->
- M& ?- D: r( I) r<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
2 M9 L5 X' }+ ^2 E" Y* Q