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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
- ]9 J* s3 f8 A$ o
（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可
$ `/ u0 k3 u7 j( Y- N- a( q
（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
' G7 }/ L  a* P$ \+ m(3) 创建项目

vue init webpack vue-plmhome01
5 X6 |  G: L2 o' }. U. e  @) K

(4) cd /d D:/webdev/vue-plmhome01
9 f. Y6 o; p3 a6 F/ t9 T如果报错，再运行下 npm install

npm run dev
% u" S3 [/ q2 o5 _0 i

; T  t, b; t% d$ ^& r0 K/ U6 Q
1 X1 d# L& ~* Z- L7 k
* {; S( `4 f' F/ o
还有一种简单的做法

vue init webpack-simple vue-plmhome02
7 Z9 ]0 ?! D( [: ^
* _- w6 A& |, R- i目录更精简些

admin

新版本安装
  K1 t' s8 `  n
卸载老版本

9 [+ w* I7 J# ?+ |5 S$ e" enpm uninstall vue-cli -g

安装

$ W8 _: z- k2 m7 i. Onpm install -g @vue/cli   
- c. {' b& d; D* z9 y$ R
+ j) Z6 Z7 a8 B' R
vue --version


vue create vue-plmhome02
8 U, L; ^& l  v0 ?$ q: M

& O/ C% a0 i3 ]. C  _  }npm run serve

3 J: D% U5 R2 ~* c


& a% @' e* q+ j2 @5 A* h  j* t0 O
8 k& T7 m7 [4 k: @2 B+ [  ^
' o4 S% M, r& r" e8 I
. E  P+ U' _7 P

admin

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

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

. C6 J) y: k" Q# R- s: J$ g

  </div>

</template>

7 }; q. z* R. J  j

<script>

6 `0 C' K: u- H- |9 X2 x

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

<style>

! Z# F8 @8 [1 E9 P8 y7 l( M" X

</style>

% S1 f8 }" _' m. x% d

admin

数据绑定：


% o8 M) V* z0 [<!-- Bind Attributes -->
. f% E4 w# A4 d/ B- l" n<br>
/ Q# k5 m& d6 z* ]. @3 }<div v-bind:title="url">
3 v# A! Q) Y+ `6 O& M  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
! `$ e7 q) r( G: t<div v-html="html">
</div>
<!-- Bind Text-->
8 W4 J% Q' {2 i, T! F" i8 T<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
1 n+ f' v* X0 ^& N3 f) t4 H/ \. t! l

admin

数据绑定：

: \6 g' H5 [3 s1 p$ l6 X3 e* c
+ ~/ c. A$ W$ M% Q! P<!-- Bind Attributes -->
! W2 X# k( x' s' Q  y<br>
0 z! r" E* I" {' I9 Z2 ?( w<div v-bind:title="url">
  "This is for the url bind"
% j9 x4 E1 c) j. L4 g$ k4 n2 L</div>
) m+ K8 k" r) i* g8 ^* r4 n<img :src="srcurl" alt="plmhome logo">
, A7 J; q) A6 j' j/ u! u" X<!-- Bind html -->
0 b4 o) b6 w% n: h% V<div v-html="html">
</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
; d5 j4 @. u- L8 h</div>

admin

数据绑定：
  R  y( F$ {+ [& \" t: x
# ?( ?* u9 F& [% x2 i
' n: u7 a/ f2 |* p( k+ X" K<!-- Bind Attributes -->
<br>
( l, z8 j7 ?* H. q8 C<div v-bind:title="url">
8 y4 p  c7 Z1 ~' X, J  "This is for the url bind"
. ]$ ~7 ~0 r/ B' N3 o6 c</div>
1 t/ W6 Y" T0 P/ Z5 r" u<img :src="srcurl" alt="plmhome logo">
7 T( R! i8 Y3 N5 X  R8 }& d, K) ^<!-- Bind html -->
( Y; a. B. F  \: K<div v-html="html">
</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
3 d( Q  J! t  @8 U3 q% l

admin

数据绑定：
, l8 [0 ]  M6 P" ]
0 _& d3 u# L* y$ h
- B. C. J1 f5 W- w7 N<!-- Bind Attributes -->
<br>
# j6 {, R7 [" t2 T4 l# |<div v-bind:title="url">
9 K, d' H3 g% A3 x' B  "This is for the url bind"
</div>
/ A! E' ~5 g6 y9 S<img :src="srcurl" alt="plmhome logo">
% @) \# y: T8 @8 c8 y* S<!-- Bind html -->
<div v-html="html">
</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
+ W4 F1 \' f: w</div>
  h8 @; i9 q8 ^1 R/ R