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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
" d! n* T, W, l
（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

& y" f9 o9 U, U（2）安装Vue 脚手架
2 q; D+ Q6 K8 A>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目

vue init webpack vue-plmhome01
: Q6 ^' a, `# s
9 w' }" T0 }# }
; d- x4 v; X. d4 g: X1 D7 J8 B(4) cd /d D:/webdev/vue-plmhome01
如果报错，再运行下 npm install
8 B. T* H' L  q; E1 a  B
npm run dev
4 R2 G7 l. E  b% S2 B7 P) m) }




) v* v/ I- d' T- q% P9 X' r还有一种简单的做法
# b+ z8 e7 Z) _, t6 r, o2 ?
vue init webpack-simple vue-plmhome02

目录更精简些
$ ]) U. r" R# t' ^* n4 R/ H

admin

新版本安装

卸载老版本

npm uninstall vue-cli -g
# f; s6 R4 c% H0 [9 W3 I
  d& J; Q; L9 |& V' y  k6 r安装

npm install -g @vue/cli   

, G5 t2 z$ R. T3 j' A2 O
vue --version
3 M" a; p& F# ~8 [3 E
- `# {0 z9 r" F  i
vue create vue-plmhome02


npm run serve


/ N2 i; k, M9 r5 P# P$ `

% W& W+ i, z' ]8 X) `# t, P
9 m* ^9 S% t$ K7 M' i7 ?' T9 Q0 v
7 k4 J) V9 V7 ?2 p3 t' R

admin

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

: g' E# e* |& L& F! {

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

) c! H% C! J- O3 m1 y: y7 ^- D

  </div>

</template>

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

! z6 y$ N( C% J) m0 I& N

<style>

- }4 l: H7 v* r; U' `

</style>

admin

数据绑定：


<!-- Bind Attributes -->
, h% g: J4 N2 k<br>
7 Z% [, _0 |/ l' I) b  c<div v-bind:title="url">
  "This is for the url bind"
</div>
7 v/ i, ?/ L$ Z/ ]0 s<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
1 m0 P+ `' B* i; {1 D7 H<div v-html="html">
</div>
& u& W- I8 C7 b. T7 S: [<!-- Bind Text-->
9 P6 Y& }! n0 g2 c: V9 J<div v-text="msg" v-bind:style="{color:'red'}"></div>
1 B" F- R- u4 ~1 C; ~</div>
0 y# \3 w( F6 v5 P) W

admin

数据绑定：

9 \# Q* W6 C) V6 {& e# c
<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
3 V/ n% }0 T$ M/ [# |$ d<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
) F0 }% S2 x+ }8 Q8 T5 o9 n<div v-html="html">
9 s4 o( c4 l+ D5 [; O# l</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
) Y3 N, U# p5 f1 [</div>

admin

数据绑定：
& O- l+ Z8 H  S5 V5 J% E3 ^5 |
  D0 L; Z8 ]  m- x2 r* ?" z
# G; D/ r% q3 \1 q3 y. F/ F<!-- Bind Attributes -->
<br>
, I9 P: O& N7 h  W6 j! D<div v-bind:title="url">
5 @5 T3 g! C- x  @0 [# e, l  "This is for the url bind"
</div>
: g6 V( g2 F5 F<img :src="srcurl" alt="plmhome logo">
9 ~. z4 a  ]+ m5 z. [1 ~<!-- Bind html -->
: _1 o4 s5 D  c" D$ j& J<div v-html="html">
7 |7 v7 H" Z/ {' \8 P9 t/ s- E( b</div>
3 f! h) Q0 T4 Z& v. `<!-- Bind Text-->
& q4 l' A$ S- r5 V<div v-text="msg" v-bind:style="{color:'red'}"></div>
0 R" v# q9 |7 _+ x) @, m* S</div>

admin

数据绑定：
; \2 ~% p8 O2 G0 Y3 _

<!-- Bind Attributes -->
+ C0 Z7 e, @! w. }+ o! a( y<br>
<div v-bind:title="url">
" D! C" F& m% v2 s+ x! R2 E  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
4 l. c8 |. @( D5 H9 X<!-- Bind html -->
4 z& n/ z9 L6 B! d; ]7 Y, _7 @4 k<div v-html="html">
</div>
<!-- Bind Text-->
, J) Q- o; G4 T- C5 V<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>