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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
  g* {, X6 J$ a+ V* d/ Z" b
（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可
9 g+ d( }8 [5 Z* d6 ?* l
（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
# F8 O* X1 |: }( p# y7 t7 B(3) 创建项目

vue init webpack vue-plmhome01
& ^, l5 n% f" w1 I

(4) cd /d D:/webdev/vue-plmhome01
如果报错，再运行下 npm install

0 a' n/ x. b3 Jnpm run dev

! g$ `) b3 v+ Z. m6 D' R" e3 ?


, o& |0 t% f4 g! ]
% B+ P  T4 D  g7 ^* d4 [还有一种简单的做法
* T' k/ ^8 T) ^
2 t; ]1 e% q- [' \/ M) F; D1 `vue init webpack-simple vue-plmhome02
* y) h" d5 e/ S0 B3 E; |
目录更精简些
+ M  w% b" U* a' E9 \5 G; G' I

admin

新版本安装
4 Z# L- F: ^& m
. `5 W/ C' @1 T* J+ l9 f7 t卸载老版本

npm uninstall vue-cli -g
1 H- A! Y" f. U
安装

npm install -g @vue/cli   

- V2 u* s1 T8 @
; S& b" ?( j* Y) E0 E! z. C, \& C: evue --version


vue create vue-plmhome02
; u  d- d6 o# M- I
- r/ ~+ \' i" S/ C
6 L5 ^( i' }3 j% l& [$ anpm run serve
0 r* E" R4 W8 j
1 X1 `1 l: o, Q8 d+ K" }  }6 B
* O8 t' I' s. a& Q5 z





4 v" g0 ?% y/ `  X* I

admin

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

6 |: R! Y3 Q, `, ?1 a7 I; X$ f0 s, T; @

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

$ T& M& R( Q  v4 C7 v7 B

<script>

# R0 L: y/ [' V! f- }

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

4 ?4 H" }! ?. T1 k; w2 D2 s* A

<style>

! z5 p8 Y2 U4 _

</style>

admin

数据绑定：

2 h) Y7 {- ^) K" q- A
<!-- Bind Attributes -->
<br>
9 O2 F! X* v/ `/ ]<div v-bind:title="url">
; T; V% s! }4 z  "This is for the url bind"
# _9 }, \& c  D! U# B</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
7 C7 D! p+ U  p% n, y$ {<div v-html="html">
/ t$ Y- H, D! k* w6 w, E</div>
<!-- Bind Text-->
" U+ Y3 M9 L/ e. X; k1 y0 y<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：

) V( D) l" g% g% b4 |+ c4 x9 l' _
4 _" e  S5 I8 e. [5 v* B) W1 B* Q<!-- Bind Attributes -->
# Q( f) T; X" ?/ o3 z' ]; q8 x, r/ V<br>
, F8 n* x! h  ~0 Y3 ^<div v-bind:title="url">
$ u( e5 }3 q! x/ m; ?% O  "This is for the url bind"
</div>
) t+ _% D: c! {<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
0 @2 L) s. F2 t" T$ ?: Y<div v-html="html">
</div>
<!-- Bind Text-->
3 a: y  `/ j+ v4 X/ F  D8 I; i<div v-text="msg" v-bind:style="{color:'red'}"></div>
% v2 P6 x. f! k3 L9 f; i5 w</div>
* V+ g  U" e! j8 s

admin

数据绑定：

& G, Z3 Q- P( v* m6 d) R" f- E
9 Y0 D6 i$ S  C) `<!-- Bind Attributes -->
3 {/ B3 Q/ I" J( I' D# V; j<br>
0 e7 Z6 {0 P& X, [2 u0 b0 h- I<div v-bind:title="url">
3 @; S0 R3 J9 b  "This is for the url bind"
, m" g5 C" f+ Q, f</div>
<img :src="srcurl" alt="plmhome logo">
1 Y6 v2 x9 r8 y$ T: O+ \' E<!-- Bind html -->
4 i- C2 N% l, t( I* D! l2 i<div v-html="html">
</div>
" ~; Z( {; x7 U3 Q2 U6 l, j<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：
: f: J: z0 h' @. g& K7 U
: W7 k- m" W0 A+ [1 p# t, _
<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
$ Z9 K  J" ]5 i7 r. v( o</div>
<img :src="srcurl" alt="plmhome logo">
+ r1 _, C* j5 D9 w' t$ H' g<!-- Bind html -->
; E3 W: M1 V8 D, a' ?<div v-html="html">
, ]: e% l) r0 Y2 S  A( U</div>
! P- b( ^3 f9 U! D( v- Q; I<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
/ ?8 _5 H9 \6 b</div>
4 k% j$ G& P4 {2 J3 o0 \