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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
5 o2 @7 Q3 }. m9 G  `
" S2 N1 E) o' y7 F( K（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可
- T* p& p( U$ w
3 y6 X  Y6 N( B  j: O. c（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
+ [0 j8 N' G6 K" V2 r: s# J0 M; m(3) 创建项目

  C2 x/ j" `2 ^& h  F9 _vue init webpack vue-plmhome01
2 ]3 ~% O9 ^3 d. N1 I+ C
5 F: {% `: e. a" b! k9 ~: i
(4) cd /d D:/webdev/vue-plmhome01
4 c. [$ f$ ?( }7 h  K/ y# g, Q) l如果报错，再运行下 npm install

* }- c! L* O1 L/ c2 j! qnpm run dev

. `: Q4 K: \7 A& E, P5 a% J+ |( J( m


3 Y- l2 f. _/ Z$ l: H+ j- S
% x" W: V9 W0 a* T6 e还有一种简单的做法
- m" }1 C& a9 B- f# l% l0 d
vue init webpack-simple vue-plmhome02
; D& h! A2 ~! m, a% U3 O+ K
7 x+ ]( ?" V' z! \' T/ w; ^目录更精简些

admin

新版本安装

* [2 E" S5 Q1 ~7 \& N/ X卸载老版本

npm uninstall vue-cli -g

4 h4 Y1 }6 T& X5 F6 P安装
9 E$ A# O$ i% a, ^6 E4 B  z
8 r4 m3 ]# g+ ?8 gnpm install -g @vue/cli   

; L3 ]" I: U; k. M
& d: j$ H1 C% n  k( Hvue --version
7 h0 w3 a0 I' P7 r+ p; H' p

1 a! F8 ]( k9 s6 `vue create vue-plmhome02
; U% }' b0 Y" a0 }% i3 v" z
5 x) O! X6 y$ t8 w5 h
3 R8 d8 R) h% A5 Inpm run serve



- i6 H, \. ^0 P+ m5 m: W
3 t5 |: e. @' Z* u  C4 {2 V$ g! Z+ @* d
7 a& Q$ M% i* r8 F
2 H# ]1 S4 V$ n7 I( _
' Z6 l% W* y8 l  z  M3 c

admin

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

( c8 g$ {8 O0 @1 H' T/ w) n

<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>

7 H. l3 Z5 C9 N) K, P1 Z

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

<style>

/ F. j7 V7 K- ^: C: C& [1 \# ?

</style>

* }: R: z0 Y) y6 C7 c/ p2 D9 O

admin

数据绑定：
8 E1 k! C6 M* x/ m1 z0 P4 L! S
: C- }. N! D) I! V* z
. T9 j0 w4 ?, N- L; n1 K<!-- Bind Attributes -->
; I% N0 b4 U+ K9 [3 K9 l<br>
<div v-bind:title="url">
  "This is for the url bind"
( F( Q5 t. M7 j( x3 u: F2 S</div>
. e7 \: g, t0 C6 l6 b. \' [<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
, l0 n+ n0 X/ A* m<div v-html="html">
</div>
<!-- Bind Text-->
- c/ S" _; @+ u: n: Y( p<div v-text="msg" v-bind:style="{color:'red'}"></div>
# p; |  r/ ~& d) f' }7 R* g</div>

admin

数据绑定：
' j, j1 D' }& k0 t

<!-- Bind Attributes -->
" u' s. ?- S+ }: U- }<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
' I- ?- O5 z: N<!-- Bind html -->
<div v-html="html">
/ q+ a) G; B4 u& X+ `  P</div>
<!-- Bind Text-->
0 P2 K6 [. C; j<div v-text="msg" v-bind:style="{color:'red'}"></div>
' q; B. Y$ W% J% r' ~</div>

admin

数据绑定：
* P% z  j# h( S* S

<!-- Bind Attributes -->
<br>
8 `1 ?. V) M# ?4 T0 E<div v-bind:title="url">
. H: I* G. P6 w1 J2 R* @  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
</div>
$ U4 l0 M0 d- M+ }4 h1 P1 \<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
- Z& H. ?$ N! u</div>
8 F2 _2 Y8 C$ b7 O

admin

数据绑定：

9 ^0 c& Y# j& L
" ]) ^- Q1 ^& o; @6 I3 @5 U) D* b<!-- Bind Attributes -->
# @% H; }# B. f% q' m<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
6 N* f$ V# m7 K& a8 w* ~, s<img :src="srcurl" alt="plmhome logo">
4 ^, R7 h1 k) _<!-- Bind html -->
2 o7 |) q$ S- Y; B<div v-html="html">
</div>
<!-- Bind Text-->
7 Z3 ~; C5 [- g<div v-text="msg" v-bind:style="{color:'red'}"></div>
0 S- l1 q8 `- J+ x: o* h</div>