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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
9 f! {# d7 ^& O6 C
2 v# |* p4 |: ~1 {4 y% G3 F0 ?( d（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

/ Y1 o  r" v$ @2 Z（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目
5 o3 @; k$ k9 T/ P3 a
vue init webpack vue-plmhome01

1 [9 ?- e8 }! R  X+ L1 i: h1 ?' k
3 [5 f5 m8 d/ R+ n, Y(4) cd /d D:/webdev/vue-plmhome01
# S0 V6 o: U2 \如果报错，再运行下 npm install

  G7 e% e& g, d& ]4 lnpm run dev
. P" H& F. Q8 b0 d7 e! d0 p
$ u" W5 ?1 B: ?4 v& L/ n& T

7 \2 _9 w+ b* C. X. j7 M8 M8 A
9 {1 w; i% g0 B$ l
还有一种简单的做法
: H  D: ^, A) L, }8 o5 F
5 W) x! X( w% Z, kvue init webpack-simple vue-plmhome02

目录更精简些
( c. l) g1 Y( n  Q

admin

新版本安装

0 W2 i) F3 A. k* e卸载老版本

npm uninstall vue-cli -g

. v7 G, q9 u; `6 }, q7 A$ v安装
/ f! S) w' ]8 M9 @0 I6 F
$ L4 C$ H4 c+ Q8 ]% ?+ anpm install -g @vue/cli   
$ z1 F) b1 q8 V' @
- r" m) ^% I! |" m: y
vue --version


3 z$ z9 a% V' s! vvue create vue-plmhome02

+ r! R4 a" y/ Q0 M6 O7 ^7 z
npm run serve


3 a0 v8 J4 v; w2 V4 W0 w
  z2 q7 Q! y  B. E. Y% u  }* o; d; T

: w7 ?4 y8 S7 m+ B; l: R
2 g- N, j3 R$ Z: G7 C

admin

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

5 ]" ]  t0 _0 W

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

* }* s7 t* Y( \1 O+ d5 C8 h  @0 C

  </div>

</template>

2 ^9 L( x. K) y# n

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

9 x% u7 V+ w! P2 V8 R; F5 z

<style>

2 A* }0 C2 ^% W: z9 V! n, \

</style>

admin

数据绑定：

$ b6 N  C* z7 Z% j  |/ F, u5 [8 |
<!-- Bind Attributes -->
( B" P' \) j; h5 ^! b7 w) J<br>
<div v-bind:title="url">
  "This is for the url bind"
" u; W- Z( a) q( X, Z1 P, V</div>
0 S+ N. y1 f  K' Z4 P6 f3 i( Z6 W2 ~<img :src="srcurl" alt="plmhome logo">
' ^  ~+ s( Y* _6 ~% d/ Z<!-- Bind html -->
<div v-html="html">
' y  H9 e# [# l9 o( G</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
( d5 a' r/ o  q; v8 c6 i' }5 h

admin

数据绑定：
9 C+ k! A+ h) ^" T4 S

/ O" D- K+ U4 n. P<!-- Bind Attributes -->
4 U* A7 K( \; o  K3 n* U9 {<br>
<div v-bind:title="url">
* y6 }9 p- r& J0 B  "This is for the url bind"
3 n7 a( J4 [6 s  N  R</div>
" r$ {" H$ Z1 d4 Z<img :src="srcurl" alt="plmhome logo">
' N6 P, u1 [+ N) t+ D<!-- Bind html -->
<div v-html="html">
, I8 X0 C2 A0 O1 v9 D</div>
<!-- Bind Text-->
! \. D+ h5 v, q<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：


<!-- Bind Attributes -->
3 V( {9 J* G3 N/ S  n<br>
( G. z2 f9 u. H0 \3 C9 S<div v-bind:title="url">
( q6 K* h' ^# [+ ~$ s  "This is for the url bind"
</div>
( z8 s) o. F0 t- q7 ^5 N, K$ _<img :src="srcurl" alt="plmhome logo">
7 K7 Q' b; D7 F; V  o; d/ V' E<!-- Bind html -->
9 E, {) p5 I+ h5 v. |* Y! U2 @& G; ], _<div v-html="html">
</div>
9 @! B+ ?; D8 X/ h8 m9 F<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
4 @) ~9 n0 C4 A% {) k; x

admin

数据绑定：
+ i8 Y1 T* R) N: P
8 F: u$ i' P: ^% {$ `
4 y* }( u; p' B( M! \0 D1 Y1 L<!-- Bind Attributes -->
! ?" I8 q  T" D5 a/ b<br>
3 }9 c- M! ?& k* o<div v-bind:title="url">
  "This is for the url bind"
) l6 f: Y: d, ~5 i* ~</div>
<img :src="srcurl" alt="plmhome logo">
2 N8 r& C' J+ I0 N8 x<!-- Bind html -->
<div v-html="html">
</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
  \: ^4 I, E1 i5 r, _8 i5 B# n</div>
5 \  j; Z. j6 K" y- o% g+ A