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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
( a  h/ m9 v. E# }7 U6 B3 V  z$ W/ z
（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

. X9 v0 @9 e2 e: R9 _（2）安装Vue 脚手架
1 v" l7 W3 ~% m, v) z3 \; v* Z>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目

vue init webpack vue-plmhome01
$ a) r5 X: y2 ]$ s

(4) cd /d D:/webdev/vue-plmhome01
如果报错，再运行下 npm install
$ c# t9 ?8 Z; {$ ^2 s4 s
# o* y* C9 X% N/ E# Nnpm run dev

, k( b  T' B/ E/ c, c

( X- F$ f2 P( G4 [9 _
6 }/ e3 F2 E6 _, K/ w* p
5 y% ^7 u$ h% L- @/ E) s# M/ P% ]* Z还有一种简单的做法
8 q" e; X9 L7 v0 x  y( @
0 w) K" H! M2 @vue init webpack-simple vue-plmhome02
7 V- D+ l, ?4 N, ]* [( E" g: w' f
目录更精简些

admin

新版本安装

卸载老版本

npm uninstall vue-cli -g

4 i: n" V+ B% g, u: O安装

1 v: H% J- X5 Knpm install -g @vue/cli   
( I% R  o! U5 p: k/ k
2 f( `8 Q+ @! s3 Z
vue --version
- W; Z; q4 ?1 M, f
& ~, m8 s" B, U) s( h, O
. b7 @  v$ m/ S5 |vue create vue-plmhome02

: ^! f9 M( _. x1 S. m
npm run serve

# K' v& p# X4 t8 t

! y( ]4 F/ X, _0 k. i
2 e9 r3 X) |5 H. o7 @4 P
" R4 k& {# ]9 _) }/ {( @% U


1 A( V  @/ N% G6 R, R6 t7 `

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>

% o1 _& C6 ^+ P, a

  </div>

</template>

* x4 c& g3 H# S* e5 |

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

& n4 R% ^' |2 `0 \+ a

<style>

</style>

admin

数据绑定：
; {4 k) q3 j6 }' P4 w8 V

, M. q9 w/ f' P3 v/ I<!-- Bind Attributes -->
<br>
% G0 u  L7 b! Q8 I2 [7 `4 N4 A; V+ K<div v-bind:title="url">
  "This is for the url bind"
! \6 x0 R4 S5 W9 J. V4 u% O( L</div>
<img :src="srcurl" alt="plmhome logo">
2 q( [( U+ [+ {/ N& D4 J<!-- Bind html -->
<div v-html="html">
3 E0 U5 d9 s+ g3 U7 k7 {5 P* J</div>
<!-- Bind Text-->
  e8 d8 k# X2 o' r! s6 Q/ P- N+ |<div v-text="msg" v-bind:style="{color:'red'}"></div>
% i* I: T( |9 l% j</div>

admin

数据绑定：

2 l" c& q# s  P: z8 w% _
<!-- Bind Attributes -->
<br>
. L# q& h3 Z: q) m<div v-bind:title="url">
  "This is for the url bind"
1 G' P7 [$ H1 \0 ~; y</div>
<img :src="srcurl" alt="plmhome logo">
2 \! O# w% I, o; f<!-- Bind html -->
& g& z0 A* J8 r0 e  v3 K<div v-html="html">
  K9 }2 k* \+ [3 o9 @1 g# A/ ]8 d</div>
<!-- Bind Text-->
8 W3 O9 f# w% G  J<div v-text="msg" v-bind:style="{color:'red'}"></div>
1 s2 C% }( a9 w, F+ R</div>

admin

数据绑定：

: L& B, B5 D$ w. [/ q8 m2 q9 B4 u
7 |( R$ Y. i/ w5 C$ k<!-- Bind Attributes -->
' ]$ _7 r% v$ C0 s; {5 d<br>
<div v-bind:title="url">
2 |: E& `; S" |( S  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
+ p; f( g4 b, x* D3 p( Y6 o<!-- Bind html -->
<div v-html="html">
+ W  b+ t. O6 M/ l7 W</div>
<!-- Bind Text-->
4 P% N% D/ E. ?" g<div v-text="msg" v-bind:style="{color:'red'}"></div>
5 {3 X/ ^; _- e1 K. F. i</div>
$ W3 R+ z2 ~4 w. ?' `0 {: W6 o

admin

数据绑定：
5 `1 V% W$ M& C+ b/ k' D

<!-- Bind Attributes -->
<br>
0 v/ @/ `* ~! A  w" T<div v-bind:title="url">
% H; C- t  \7 P+ P) T9 l% o  "This is for the url bind"
6 x, K1 W/ Q$ {0 G4 |$ Z</div>
. }& T5 ^/ a* A/ _: P" T9 Q  N) @<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
; ]- g& A- w: D7 V- @- |: l</div>
. [' p. _/ m) z0 y7 G/ f9 _0 U& |5 _<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>