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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧

（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

（2）安装Vue 脚手架
' V$ j; m) O$ U7 `# \9 r2 h>npm install --global vue-cli  / cnpm install --global vue-cli
  w+ [6 \( p( x/ r2 r7 K(3) 创建项目

# ?# m0 T! w: T- n% C  `% {8 K  Evue init webpack vue-plmhome01


(4) cd /d D:/webdev/vue-plmhome01
1 ~- Z0 U' y( i8 e9 S: C9 P- T如果报错，再运行下 npm install

$ _4 j0 Q( D' d/ f+ Tnpm run dev
& `# H9 I% B; l


! G9 [. f6 @5 n7 g- K6 ^/ g4 ^. e
" I( B. x; [1 S
" B2 q* J* s- J' U& P! [& m还有一种简单的做法

vue init webpack-simple vue-plmhome02
  A! \8 q/ D2 r. `8 u* G: G2 u
4 O7 J+ B% A, R1 W1 I" Z  X6 F目录更精简些

admin

新版本安装

卸载老版本
& H: [; P& q! J; ~
npm uninstall vue-cli -g

安装
3 O! p) [& B6 R
3 z4 _0 {% v0 C+ u9 o0 A6 O+ Z; `npm install -g @vue/cli   
3 y: G  F' C9 C6 y1 O
- Q* n  V* i1 ~1 Y* ^% x- @
2 u& ^* i- a6 m' |: Q* o6 gvue --version
# A. q' f1 G1 m% v

vue create vue-plmhome02
; H" ~' S- |. K4 y7 t" B: Y% h! `
/ O! q, ^# X1 x. P8 I" m' \: T$ G
npm run serve
' {4 T4 Q- R( @9 w
/ d; u8 D# p7 G" x) Z; G: v
7 V' H  t% c$ S& W0 S+ s

" V+ b/ T4 ~/ W) p


8 U8 e7 m( k/ w

admin

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

+ _( |1 G9 I# }& G4 b  K6 a

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

1 {* o$ A2 n0 K: R( \7 d9 B

  </div>

</template>

, B7 q6 b! y1 O/ t9 o% ^$ o# T

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

# p. x4 i, S, C& N! T" R7 f

<style>

</style>

3 t% {+ t" J% e

admin

数据绑定：

3 j  p8 `& W2 C4 [' V7 W
<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
, J$ n3 S2 x3 h4 u% _<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
0 a9 ?3 s- q1 ]  F<div v-html="html">
</div>
3 v/ Z" y& m4 \  `  L9 p; `+ P<!-- Bind Text-->
" V" K0 ?. Z" @' o<div v-text="msg" v-bind:style="{color:'red'}"></div>
: l. x7 s) U9 F9 B# ~* w</div>
) q. T' }  S: ?; v4 |

admin

数据绑定：
7 S8 {5 A+ q9 T. A  N6 Q# L; ]
& \$ h& D2 \8 j0 l9 y- \' m. L  ~
<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
$ y/ m* b7 E; ~2 s+ C+ P</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
8 t3 z: d' w7 ~( N<div v-html="html">
1 H/ f/ u/ ^' d9 c! b4 y1 \  H</div>
8 @  h* M" a" m( i  E- ~<!-- Bind Text-->
- t- ?% \2 S& x<div v-text="msg" v-bind:style="{color:'red'}"></div>
, v& a9 \: g" r# i; E: w' a</div>

admin

数据绑定：


9 M+ q! K1 I( W" t: D<!-- Bind Attributes -->
<br>
, J8 S1 I* x$ N  C+ P8 h. X<div v-bind:title="url">
  "This is for the url bind"
</div>
  Z. U+ S% T, f<img :src="srcurl" alt="plmhome logo">
8 R' \0 A" k, A4 d, H' B5 w3 j" Q<!-- Bind html -->
<div v-html="html">
6 k; f! V' L* T; d: i& f</div>
# S  z% y2 n+ s( H% [' u; j2 y6 r1 X<!-- Bind Text-->
9 u/ M) X9 }' i: V5 F<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
. G7 ]0 @8 Z  \/ N9 D6 M

admin

数据绑定：
4 D+ v+ x" p( r" }. f! c

2 X6 p" c' D7 H' t+ V, E$ h% Q# e$ Q<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
. ]% w4 f: J. y" G$ w; j* @5 C2 U( x</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
</div>
, j$ ]( r3 y8 R/ D* d  B  ^) H1 Y<!-- Bind Text-->
( ?" ^  X* a# i: G# t6 t; c<div v-text="msg" v-bind:style="{color:'red'}"></div>
; n: ]& Y! j$ W3 i! K, O$ F</div>
) E# @. E5 \: O% u: y1 W