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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
& F0 ]% }5 V+ x) q1 V
（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

: D% D9 L1 C4 @+ K$ K. f（2）安装Vue 脚手架
: d" q2 ~  ?. I" b5 g+ [& s3 s>npm install --global vue-cli  / cnpm install --global vue-cli
: k' D* S# b) {1 a5 I! K5 c: M(3) 创建项目

vue init webpack vue-plmhome01


$ D5 L: E4 j, I8 y: D: U6 D(4) cd /d D:/webdev/vue-plmhome01
1 E( U5 [, }1 k! @* w" @3 Y7 Z如果报错，再运行下 npm install

npm run dev
, s7 Y& @* J; B/ H  w


6 t2 T- \* d7 A3 H- J% h

还有一种简单的做法

vue init webpack-simple vue-plmhome02
" X8 w) N/ }9 R, t( Z
目录更精简些
$ u$ @% \5 v& }1 E7 |( I0 L

admin

新版本安装

卸载老版本

npm uninstall vue-cli -g

/ O, L  p# T" a  v7 K安装

0 S: n3 y. P4 v1 ]/ Bnpm install -g @vue/cli   
( Y. J% l4 G, H3 @: Y& Z1 c. ^

vue --version

( M- v  P% z0 L0 Q5 W: [% J
vue create vue-plmhome02

3 G/ s/ U) c. Y% `- W$ A* f
npm run serve


- l! _9 x- ~" V; a# Q' n& j
% H' q( w/ O- T; |: P

- X4 v0 n+ S! d. u
8 o# J) i6 N; u
$ Z; O* \# u& s" J/ A) V( z
6 c. h3 \* G  `9 @" O7 u) P

admin

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

! F8 K# J& M( c: n/ S

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

, ^4 W* k/ |8 {* g5 s

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

<style>

# Y/ k7 _, f" H$ I9 q: q5 @5 B+ P

</style>

admin

数据绑定：
  C  S0 u$ e' |7 o7 L+ E

<!-- Bind Attributes -->
<br>
* I" z! _5 D1 H. C0 o0 g<div v-bind:title="url">
) S$ \* T* \. K5 O  "This is for the url bind"
, k3 u$ Q& A# b0 j  }5 J</div>
<img :src="srcurl" alt="plmhome logo">
  b" X2 ~7 r9 S  K% D, @6 L  D- t3 t<!-- Bind html -->
<div v-html="html">
. E0 y/ k9 s; h+ N) {& I  j7 c8 \, _</div>
) _) n4 i, {, H# L/ S# ]9 V<!-- Bind Text-->
& @$ J1 p6 t, O( r2 b5 O' E5 q<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：

: ]& H5 x+ ?$ F
<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
. |- @% ]7 c4 t* M  "This is for the url bind"
7 l+ Z0 l8 M3 _% u</div>
1 R# T  b0 C, s# b5 U<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
0 ~% x/ x, v) [2 Y' Z: }! h) ^</div>
+ G9 M; O$ g% b# B<!-- Bind Text-->
% o; B7 Y$ l" A2 B, ~1 L( }<div v-text="msg" v-bind:style="{color:'red'}"></div>
+ w" S; ~+ }( F2 V</div>
9 z$ m0 x& Q4 h5 ~6 F3 k4 m: w# T

admin

数据绑定：
/ J' g! h! `5 R

7 x0 H; ^9 m. J1 h9 B<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
- i2 _1 M% s6 k& R0 l, P0 L</div>
  {4 t/ ~) O1 H8 j" a: Y+ c" K<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
) d5 ]  N: a7 b2 t& V4 Q8 k<div v-html="html">
</div>
<!-- Bind Text-->
/ n7 ]. G- H) \3 ~! E1 X- r! H) L<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：
, F, Y( \. ?) d: H0 }! C, t
+ Q: N) z6 v. S$ c( v: w
$ V3 F# k+ s% l8 M* A: k% T<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
7 X- O' k6 _# S* i# i) X* G, h  "This is for the url bind"
</div>
. I1 s5 s/ o4 j" r<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
) ?0 n5 J" m  V2 i2 f  X# o. F0 ~% m<div v-html="html">
7 a, y) K9 {0 B, ?* L</div>
* c) z3 m+ w. f4 C: k4 z4 \! c<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
, p" D) U# g, S) E" f