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

admin

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

% c5 g2 _6 l, G6 _（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目
3 m) u3 i& q: @4 Q! [1 j9 \
" ~# m3 A: T+ x+ Z) v. kvue init webpack vue-plmhome01
: S8 R- H5 h' w5 t0 s

(4) cd /d D:/webdev/vue-plmhome01
2 f8 S1 m* q% ]' E$ H如果报错，再运行下 npm install
) @! Z+ A& U; N& s
npm run dev



- Y8 r% \4 b+ |; o
$ ?! Y8 w. I4 t; W
, m9 K# I/ P: n6 T4 B还有一种简单的做法

vue init webpack-simple vue-plmhome02
* p5 Q5 x( c, n3 G0 \1 G$ a
目录更精简些
* b/ O; N- x; [, c' x6 f

admin

新版本安装

' b; L* {; ~& @5 Q1 T卸载老版本

2 S. K' m, |, a, Mnpm uninstall vue-cli -g

6 ?4 s' V1 \3 Y安装

npm install -g @vue/cli   

4 J2 q$ K$ h& i  n$ J
  d6 Y; k3 W; Q# lvue --version
" l' W" u- U- h& b
0 m0 G5 \* s- g9 H2 ~, j) f, X4 F
. `5 s# I; T+ X8 y0 b9 b1 v% qvue create vue-plmhome02

& t) A2 G. u' E9 y
npm run serve


+ Z6 b* I% ~% ~: F
8 h4 R7 }: E, A9 P& s7 v& N% M! `) J




; _& [3 G1 e2 T+ R+ {, f

admin

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

: h, P' M6 p$ r+ ?! i$ O

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

% o3 s! S( Y! R& s$ ]

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

<style>

, ^8 B) v+ R; |

</style>

: d, i, W# m4 t3 v

admin

数据绑定：
# L5 X0 s% k- K, F2 _; |( i3 _

. O  l5 Q9 h% B9 z& |. c<!-- Bind Attributes -->
<br>
4 N+ o' u) S  Q; y<div v-bind:title="url">
  "This is for the url bind"
</div>
! r) N" [0 `% F- Q: k<img :src="srcurl" alt="plmhome logo">
6 y9 r: L0 u9 r7 x5 m0 V' b9 u" F<!-- Bind html -->
% P" {4 R" I6 V2 _. @) N, z<div v-html="html">
3 r- Z" E7 ~+ R* ^</div>
* u- K; q* P1 K; |. _9 K<!-- Bind Text-->
; c. W7 G: h& H( c/ I, g& ?! r$ S<div v-text="msg" v-bind:style="{color:'red'}"></div>
/ u2 S8 w: m2 b4 s# W, S% d* Z</div>
% j+ ]5 v$ B$ i+ c4 e3 c

admin

数据绑定：


7 W  X3 d  Z% }7 _1 B<!-- Bind Attributes -->
<br>
7 j$ n7 o! A7 ?5 w; V<div v-bind:title="url">
  "This is for the url bind"
</div>
9 _5 r4 n6 v/ v, V* W<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
* B: v3 V$ p0 m4 Q3 p7 L( c<div v-html="html">
' t+ G5 |- D; w6 W# i! s</div>
  e! N3 N7 G# y& @2 ?! a5 \<!-- Bind Text-->
6 F. b0 Q* P0 p- y9 q& e6 n<div v-text="msg" v-bind:style="{color:'red'}"></div>
$ ?1 C- D+ ]* @5 a' B5 m" r* x& R" A</div>

admin

数据绑定：
7 o3 q* t4 n9 }- M7 }% H
+ U" Q; I' s5 ]" `6 l6 Y& U
; Y& V4 f+ g4 D# @* t) O: ^: v4 z9 G5 K<!-- Bind Attributes -->
<br>
5 b- E5 n5 T  t/ g. a" U<div v-bind:title="url">
9 G2 M2 s& v5 K) f  "This is for the url bind"
+ t* a. @9 o% R" ?; G! y* S</div>
6 b# D9 r+ v; ^* C# P<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
4 m9 O6 k8 j$ Y: d) a& D* p<div v-html="html">
</div>
+ C2 }3 E5 \: G) w<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
& i# Z, K7 C, V</div>
  x- `( @. z0 N' R

admin

数据绑定：
( M7 p, n6 x5 Y9 i" M2 k3 K; x

<!-- Bind Attributes -->
2 n  q# n" _5 S: q, }" q* h+ [<br>
<div v-bind:title="url">
0 f& F% I' a! I4 u) M) \  "This is for the url bind"
3 Z9 r" g* m  u) c</div>
  P3 _2 y- X! ]7 [3 [, U( m% G<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
</div>
9 A1 I% _3 m8 m  i6 m<!-- Bind Text-->
" u9 H& P! P6 H) u4 V# r  [! x<div v-text="msg" v-bind:style="{color:'red'}"></div>
: A' @8 r7 Z6 Z7 W" l. ]0 J</div>