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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
( ~, t& ]3 Y$ \1 f5 F5 g6 h( j# H
（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可
, p! v* K3 @8 z1 W* t) l
- K( U4 J" l) K3 X" x5 s- Y& t（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
! |, q  W$ I3 Q. p2 {+ T; L(3) 创建项目
. E( R: ]# P8 h1 g: I. z! t
vue init webpack vue-plmhome01
- q: [% n: U+ i8 C5 v6 k
. \+ R2 O9 |+ A# \. c/ c' q7 ]% U9 L0 R
(4) cd /d D:/webdev/vue-plmhome01
. Q. u4 V# C( X" S9 q7 C# _. J( [8 r& y如果报错，再运行下 npm install

npm run dev
6 [0 `! ]1 J/ E2 G" d7 W




5 f/ R) ~2 |1 `+ z3 r% \( e4 s还有一种简单的做法

3 ?+ ?+ X; h" svue init webpack-simple vue-plmhome02

- ?  C& n. u/ k  J7 n) u7 z% G$ `6 K目录更精简些
2 l1 f2 a; w- d9 u+ s

admin

新版本安装

卸载老版本
! Z6 n& Y. i& `' @; D8 n/ K- R% v
npm uninstall vue-cli -g
6 @2 M) |- f  Z6 i: V$ j
9 m3 o9 Z' c; z+ h$ `0 w% f安装
2 G% b0 t' e% G* g4 [
# h- m# {) I3 W' ]( Jnpm install -g @vue/cli   

+ I' {+ j( q; d0 |+ u
vue --version
+ ?3 G* ^% j* W# i  v* t
6 i. p6 {* ~, H8 ]) N2 [
vue create vue-plmhome02
* \! ?0 G4 O/ D8 o, s  |# ?

/ y6 i! o/ |1 p/ Znpm run serve


5 y, \. d2 H: Q4 Y3 M9 z0 G
$ f0 X4 ]% j; j4 t( y) ~
5 R7 ~5 m7 d; s+ [% O5 {! t% j7 C


; r+ v& G# q2 p2 r2 |2 B

admin

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

+ }2 C( y8 \3 c4 ~

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

# r. D5 o9 P1 |

  </div>

</template>

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

% V% U0 d* q+ M' @5 B7 T* F- _

<style>

</style>

admin

数据绑定：

0 x$ Q% c/ h$ [" ~! k
<!-- Bind Attributes -->
( i" I7 E$ ?2 d3 {  n) a! }<br>
: q' [' p5 {/ C( L<div v-bind:title="url">
  "This is for the url bind"
</div>
, h9 O5 |$ R0 L; V8 d<img :src="srcurl" alt="plmhome logo">
: \, T/ s2 U/ D0 N8 h# n<!-- Bind html -->
<div v-html="html">
</div>
<!-- Bind Text-->
, q$ `) A4 J& G0 q+ C: z5 j) w4 F: s<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
/ s( d7 D% X" k# N8 |

admin

数据绑定：


<!-- Bind Attributes -->
- Q6 C# b  ^$ K<br>
; k! \& n7 V" }/ F8 F) T6 w<div v-bind:title="url">
1 _, `$ w; z$ V  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
6 a% Y; G: [& ]9 G9 J' U) Y<!-- Bind html -->
% D* y, \) |& ~% j<div v-html="html">
3 o: _+ K1 k2 ]4 J$ @( m</div>
<!-- Bind Text-->
, Y$ O- K1 V% s1 w; m9 n* o4 z<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
( L+ o+ P' Z( w/ ?9 S3 J

admin

数据绑定：

/ U. Y% b/ i6 h: O5 @* A% {  E
: f+ s% U& x& U3 l4 p<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
8 u1 Y  O9 w3 p1 q<img :src="srcurl" alt="plmhome logo">
7 F/ @- R" g+ l<!-- Bind html -->
<div v-html="html">
</div>
) p( J" \; X3 ^<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：
4 T7 V+ q* V& s, H9 v

; \' H6 \/ ^* o5 B3 d! C  p# {  Y<!-- Bind Attributes -->
4 K% N$ ]5 b% t<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
4 v, y( ]: m4 m/ l$ o- V. E<div v-html="html">
" _8 b1 ^* Z2 W0 ^! I: a% o</div>
, _3 s( h) E9 }6 Y( Y<!-- Bind Text-->
1 `2 z3 G$ P# e, Y2 C0 {<div v-text="msg" v-bind:style="{color:'red'}"></div>
! T. |  x' o! v# m) Y9 }</div>