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

admin

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

5 t1 i6 q( j6 U, r; e, ]- S（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可
: s, y. v3 |3 f  b3 ]- e6 Z" u& r8 `
（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目

1 b, ~9 J1 y3 X3 e6 ?8 Xvue init webpack vue-plmhome01
, K* w0 q" `7 y9 C; O. B: H3 G+ P0 ]

2 D; ~, Q# U7 L% a* R(4) cd /d D:/webdev/vue-plmhome01
如果报错，再运行下 npm install
6 G6 J1 U8 J0 T; ~2 u* P
3 L/ v8 X) e* e% x, Vnpm run dev
6 C! V8 o( L& T* _0 w, B

5 O8 |- l; J' ]- E3 ~


还有一种简单的做法
5 m9 ~2 N: y3 x4 ]1 ~
2 h8 n* Z  _) C) y% c! X6 fvue init webpack-simple vue-plmhome02
, h0 v- O1 \  p; h/ o7 ]+ e
目录更精简些

admin

新版本安装

卸载老版本

; }# e: `. g4 j: Gnpm uninstall vue-cli -g

安装

npm install -g @vue/cli   
# m3 f9 r0 w+ a0 W; n

vue --version

2 i4 X' \7 G" n7 u8 \5 j
vue create vue-plmhome02


npm run serve



, I- U* W* f/ m' W# p0 Y" V
6 x0 P6 g. [6 D. _# {$ H

' W  e, t7 Z5 k6 j/ s! y$ j

admin

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

; a! Z2 f/ T7 F1 o; d

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

1 r+ s& S5 g6 L& |" @6 b

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

3 z7 W2 `6 a+ E/ W

<style>

</style>

3 y, C9 }" y2 m+ g7 C# w

admin

数据绑定：


<!-- Bind Attributes -->
$ y5 ]" c2 T, H6 R( b0 S# F# r3 T( m<br>
) \  h8 P  }- j1 ]! ~1 m<div v-bind:title="url">
6 p4 P! r2 r1 O3 n; E( B1 t  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
* w: u+ a" b" D2 l; n, q" t<!-- Bind html -->
/ _0 v8 d* b! {<div v-html="html">
* Z4 f& f, Z/ ~# k</div>
<!-- Bind Text-->
) ]  u8 K' J; G# R, K: g  s& `! ^<div v-text="msg" v-bind:style="{color:'red'}"></div>
- T$ D/ o" A% }4 W; j</div>
% O" N1 f* \- }; r

admin

数据绑定：
9 b6 g0 L' d( g2 M0 N) [4 p2 O. i& c

' I6 Z! c- L% Q* }% F<!-- Bind Attributes -->
3 ^* D$ `  m5 k6 Y<br>
0 o2 |1 P4 a% z" r$ S+ A- b<div v-bind:title="url">
, Y& i, W. _# q$ T/ K  "This is for the url bind"
</div>
% C% k0 }$ R; X* [<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
- Q* y$ s  ?6 A: @  i</div>
) K, i5 K2 \( w9 }$ C3 V6 o' A6 h<!-- Bind Text-->
& p& \3 b' b& x# m: M<div v-text="msg" v-bind:style="{color:'red'}"></div>
- w! n0 ?& p  F+ u</div>

admin

数据绑定：


<!-- Bind Attributes -->
<br>
2 ?' V2 ?8 ]) N: J; S3 T! D<div v-bind:title="url">
  "This is for the url bind"
; u$ D; R+ X# ?/ K* g</div>
/ B9 C9 ~% C6 d- r# ]<img :src="srcurl" alt="plmhome logo">
+ N6 u3 V/ w' ?& ?; x: F<!-- Bind html -->
2 H5 _5 Q8 G; q& C; ~2 h<div v-html="html">
# [' a/ ~. \0 d4 W# g( Q( t</div>
<!-- Bind Text-->
+ n7 X7 T4 @$ r2 F<div v-text="msg" v-bind:style="{color:'red'}"></div>
1 V7 p/ y. ~0 C, a/ s7 i" z3 _; q3 D</div>

admin

数据绑定：
1 }! Y/ M% h2 c5 d0 c  g

( d$ P; s; T, o5 c) @! B<!-- Bind Attributes -->
2 D; N9 _! {9 d<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
0 _9 N( j4 H% I. M# R1 t<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
: j% ?( W" d( r: E. z8 F<div v-html="html">
' f6 x1 `( L9 `: h/ S( J  F" ]</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
& d' e& s9 ?  ]$ w( j" R</div>
- {9 z$ n2 ^# r# U