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

admin

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

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

: P" B! L" x* k& x7 V（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
2 F! W8 Y% A3 p/ ^) ?! C$ r(3) 创建项目
" G+ w% c+ O9 D
8 ^0 K% u: R) V3 d) |vue init webpack vue-plmhome01
. z/ O- F/ T- D+ Q+ l6 y

(4) cd /d D:/webdev/vue-plmhome01
6 Y$ u1 `- d0 N5 A如果报错，再运行下 npm install
) u  d: b- K" [2 L- c6 O) P& U
7 D' o: X& D5 `/ ]' K+ f, inpm run dev

/ G( o; u& U! ?$ D5 ?


7 F' M% W  K" I) q  Y/ F5 [
还有一种简单的做法

. L" _3 I( W0 M! hvue init webpack-simple vue-plmhome02

目录更精简些
- Y: D9 K) d* B3 L# \1 W

admin

新版本安装
5 l+ D  t! b7 C/ @4 ]. ]( E
卸载老版本

npm uninstall vue-cli -g

安装

npm install -g @vue/cli   


vue --version


/ x; J; Z4 K- n$ \. Ovue create vue-plmhome02

  T1 h1 x) e1 q3 r) n8 R) J" l
! K4 d+ P2 O- R" N- v* snpm run serve





2 b7 q2 k9 s. J% O6 S6 U4 R- Z- n2 n
* n5 q& C% f  g; ^& _0 u; i' W

admin

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

) \$ \8 U2 e& p8 U

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

& a5 F, R4 o) w- D/ T# @

  </div>

</template>

, E3 J& o" v5 B3 k5 }+ G; {5 J

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

* y" }* w+ \+ \4 Z. K( K

<style>

</style>

admin

数据绑定：


<!-- Bind Attributes -->
, [; K% {& l" s/ {8 ^, ]<br>
* [3 n/ x. |0 x7 w; s) X% A  v<div v-bind:title="url">
  "This is for the url bind"
1 w1 _. K8 j" ]/ S3 [6 N/ A</div>
# d+ x2 x4 S% y<img :src="srcurl" alt="plmhome logo">
5 x& k8 z7 ^1 j. _- L. w<!-- Bind html -->
0 S. d/ G6 f7 y; g2 G2 X<div v-html="html">
  b1 r4 u% q- A8 g5 D: ?</div>
<!-- Bind Text-->
, n7 x$ K6 ^- S% q<div v-text="msg" v-bind:style="{color:'red'}"></div>
( L9 k# G  _8 n2 f' J, d# }  k! @</div>
! |/ G3 r  \. v) c( R+ n+ N

admin

数据绑定：

+ `4 T8 X: E, |0 k- n
6 c7 f' c" b+ V9 O- ?5 i' F  T& H<!-- Bind Attributes -->
* r( {) `  j4 t<br>
<div v-bind:title="url">
9 k# i- B/ g9 {9 Q  "This is for the url bind"
; q' C# C8 _& s+ S: r</div>
1 i2 I& V5 ]8 m3 i2 u+ n<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
5 H- k8 @6 A3 X. m' f8 ^<div v-html="html">
8 O' s* N4 @# \1 h4 ]</div>
  \0 B0 J% J/ b; N/ ]0 z) K3 `<!-- Bind Text-->
. N7 \& e; o& _9 s" K<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：

8 E0 }' ]1 f9 q
1 D* g% }9 `& H. T6 [5 [<!-- Bind Attributes -->
  B; [. w" N1 o<br>
7 w! `' z" H; I- P! q/ U3 d$ J! {<div v-bind:title="url">
  "This is for the url bind"
</div>
0 P. z( l: l. S7 Z/ A' c7 P& h<img :src="srcurl" alt="plmhome logo">
: U# k3 }& \* ^, y" h. _/ T2 W3 Z<!-- Bind html -->
<div v-html="html">
* e( R  R9 l6 A0 {* [8 d5 k) D: q</div>
+ I4 y4 K  c* {; {<!-- Bind Text-->
( m. B' I7 K4 w, s& _<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
1 i) C4 t  d$ K

admin

数据绑定：
" k2 t4 Y- v5 q8 S) o8 U" W7 P$ T; v+ {
: l! A- I  X/ q; i; a
4 f8 d, o3 f6 }; T  N<!-- Bind Attributes -->
9 {9 j+ V1 D4 _# G9 h, W/ E<br>
. H% K$ [' ~9 D) i7 h; W8 @  B9 j' `<div v-bind:title="url">
  "This is for the url bind"
</div>
. P3 \6 B- @* P' }/ h! K<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
, t! a4 f' X2 A4 U% s5 `" W</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
6 e$ |8 s& h2 [& Z% X</div>
& A2 f& p; Z" U- h