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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
; }/ q" {/ o5 |; g8 _$ P( I4 V" \( f
* I; k* p! F2 L1 j- ~: ~' ^（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

（2）安装Vue 脚手架
/ ~7 S4 w/ |. l- U2 \: h>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目
2 |, S6 C9 R1 ]+ D
# f: U; }9 F/ uvue init webpack vue-plmhome01
& D# q5 w! z# X- l5 C, Z

(4) cd /d D:/webdev/vue-plmhome01
如果报错，再运行下 npm install

npm run dev
# a( o1 n& o* \) O) c% L+ Z

! E# @  U* M1 q: D


还有一种简单的做法
( g. ]) b3 _8 b: j; J# }
vue init webpack-simple vue-plmhome02
# |% a+ Y- `( I
目录更精简些

admin

新版本安装

, X& W' Z) M& `5 b卸载老版本
8 h$ @) X, k- ]5 ^
npm uninstall vue-cli -g
; x2 p/ Y' `8 m3 b3 E' @0 e  C2 c" N
安装

/ ~$ s6 |+ y3 Bnpm install -g @vue/cli   

# A9 t$ ]) s  V
2 m* d3 C6 Y0 H7 A. n+ pvue --version
$ v& J' J; Y  V: r/ w

$ D# O# f, c: h6 M; qvue create vue-plmhome02


# I- T1 P8 P1 x$ P! q6 ]npm run serve
' b  p9 [* y0 s4 u! M( C
; w: O2 U1 M, l( h) N7 N, [+ @
# q2 r8 u  [( T' p6 m0 O% z
7 E( A% C1 e+ y

+ `$ `8 c& u5 z


7 h- q' H. u0 `& i3 G& L# H

admin

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

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

7 E9 J6 j2 _4 w/ p% A

<style>

</style>

! n! W3 O, Y) M8 c9 ?5 ?

admin

数据绑定：

$ R; w/ L1 L& O- R1 D# G0 q+ W1 P
<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
& j- u" P) o1 E  "This is for the url bind"
</div>
( K5 I" G6 P. `& y* v( ^1 L<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
</div>
<!-- Bind Text-->
2 d% {' B6 N# v. Z. }7 W$ Q" R$ Z. Q<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：
: F: z, q2 U, q3 k4 a

<!-- Bind Attributes -->
<br>
, l2 X+ `3 g4 f" k) Q<div v-bind:title="url">
  "This is for the url bind"
3 R- q% b% C) h: F5 H* y5 E</div>
+ _+ g6 X2 u/ ~6 Z; e/ B<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
1 H/ E$ u* q4 E" U1 m2 F2 J<div v-html="html">
1 ?8 ?0 q! C. O- j/ B# t/ N</div>
<!-- Bind Text-->
, t/ H% h; Q' M% M( N/ @5 }<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
$ n7 T" h) x. q' A) M* C

admin

数据绑定：
9 x# F/ P7 D  M8 r

& t$ A. T7 ^- }  K<!-- Bind Attributes -->
<br>
& F8 e. o1 F" i# Y& x<div v-bind:title="url">
/ ^: V& g8 S$ R! p0 {1 }  "This is for the url bind"
</div>
( O% r  Z9 H( Y5 ], q' P1 R<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
9 Q' k; X5 s9 Y3 \$ q7 }. e; T( f4 S</div>
  {$ ~5 @) n  a5 e<!-- Bind Text-->
  F& \* A- q' |4 a) u<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：


<!-- Bind Attributes -->
# L& q: d2 j% G& n<br>
<div v-bind:title="url">
  "This is for the url bind"
  ]' {) f2 S% V! Q3 n7 W* ]4 c% e; U</div>
<img :src="srcurl" alt="plmhome logo">
  x  J0 t4 f! Z: \/ x" B: A<!-- Bind html -->
4 p8 _# g% S* A$ F7 K3 Q<div v-html="html">
5 x2 R) ?2 A9 Z3 _! o  ]</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
) K3 }- N% O* `: B* b/ ]</div>