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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
2 q0 G3 c) ~2 m1 q8 q% w' M- w9 C% N
（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可
% h7 p& C* P* ^( X
（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目

vue init webpack vue-plmhome01


(4) cd /d D:/webdev/vue-plmhome01
/ v8 ], r$ ~! c如果报错，再运行下 npm install

: @" P( A4 b& Snpm run dev


" w  ~/ w/ W2 e2 P4 C

1 q& T) I( C. c/ w
* O4 r: Z( {/ A! Q还有一种简单的做法
8 l4 L! G" l4 m0 f+ T
vue init webpack-simple vue-plmhome02
" `7 |  D/ H6 [
5 ~$ z  M2 {3 E1 e& R" O" g. \目录更精简些

admin

新版本安装

卸载老版本
, y6 T$ `  N$ x+ V( s' ?6 C
# O0 [: w/ A* K# ]7 H; h0 Bnpm uninstall vue-cli -g

! U5 C$ C$ X5 t% k) Q. z9 R安装
6 H! c4 i8 j1 O; y/ n
npm install -g @vue/cli   


2 a( S- X8 I( w, H6 lvue --version
2 A9 R/ ^9 w7 Z, u' H* v$ U) ?

# l+ e  S+ H0 J0 L( _- wvue create vue-plmhome02
5 W. p. @) i2 B8 b- d
7 q6 ^- g# k, Q0 V& H
5 c; S: V$ u' t' anpm run serve

0 V2 F- y- g3 u( @
6 y7 i: D, z, L6 E+ S4 M2 ^


% r1 I7 r' _+ @4 |$ M9 }
, W: a% j0 w! I( `# \1 @) B

, y; k+ L5 |. K. p* B

admin

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

3 X! x+ ^% n7 I1 N

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

; X" S) R) t" R

<script>

: J1 \! W& p- ]! U8 n) E3 U

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

& W0 u& n, h$ R

<style>

+ G4 D' v1 T( H% \5 l9 W

</style>

admin

数据绑定：


<!-- Bind Attributes -->
  H/ p7 e+ S- F% |, f2 W0 ~, j<br>
8 c  X* e( ], V& \' l' K9 C4 a<div v-bind:title="url">
; U" p& K4 [+ `5 w* X  "This is for the url bind"
( N% c- L7 W* B</div>
* F4 M3 k) M0 R5 k+ E4 K<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
</div>
9 z' v5 {1 \* ?+ [7 X<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：

1 n. [! |% X! ?$ x/ _! |& K# S
( @- w. ?, f+ |% f6 t<!-- Bind Attributes -->
( u% u$ A+ g2 }$ }3 ^* Z<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
9 b0 W) i4 T7 F<img :src="srcurl" alt="plmhome logo">
  y/ V* a1 K4 B* N<!-- Bind html -->
* c! n/ D7 S% Q5 _/ I<div v-html="html">
</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
" |/ F& ?% D& y3 w' i</div>

admin

数据绑定：
, j+ h# ~1 Z6 C% l1 {; Q

1 a* G, c+ {- X# x1 C4 q<!-- Bind Attributes -->
3 {! _0 \4 v# C<br>
7 Z' A# l9 V2 E! u<div v-bind:title="url">
  "This is for the url bind"
" Q9 g5 [" q) P0 k9 b</div>
& S. e/ _( l1 b3 F<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
, O, v6 d8 \5 P- H7 I</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
4 g+ W9 S) M  J* Q) ^</div>
) Q( b+ k: \" ~' m) L

admin

数据绑定：


% B! m, I  F% A! I4 x<!-- Bind Attributes -->
) z/ q( {; C' e<br>
) u% f2 }7 X$ @' s/ j/ W3 k! v<div v-bind:title="url">
" O, B+ Q9 ^" j; p  "This is for the url bind"
/ a5 w' U+ V5 P' u1 e# w/ t5 B</div>
! R) h  X! r* l; T2 N<img :src="srcurl" alt="plmhome logo">
: h1 i7 D6 M# n; i1 b<!-- Bind html -->
<div v-html="html">
</div>
7 D6 S6 ]6 h; K& ^; ?<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
4 g$ c) |; t: A# k4 ?' V