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

admin

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

1 S4 e2 R/ r! ~（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

（2）安装Vue 脚手架
$ O) \# L: [) i! Z( L>npm install --global vue-cli  / cnpm install --global vue-cli
7 V- K6 [) ~) _0 ~8 Y$ c0 c(3) 创建项目
4 l8 J; D' W* k; y$ O/ h( M
. z# Q- K4 F  ~vue init webpack vue-plmhome01

6 W2 s! M& s1 m% e
(4) cd /d D:/webdev/vue-plmhome01
8 _/ V- z$ E3 k% _如果报错，再运行下 npm install

4 O: Q' P/ A6 N# ]5 ^/ s: Jnpm run dev


/ \1 e- F* d6 v9 h; f! A; k; x
. O% A& V' U8 V* {7 o) u. h' {
. `& E$ h: w) Z& v( D/ b
还有一种简单的做法

1 s+ l* l  z+ X4 [6 ]+ Rvue init webpack-simple vue-plmhome02

8 E) _4 ?1 T/ A. a  v0 ^! j目录更精简些

admin

新版本安装
3 e7 ^' Q3 B% m- J0 q; k
卸载老版本
% z! C' K5 l3 x% q8 w4 M# c8 d
npm uninstall vue-cli -g
  d/ Y1 {$ ^; B. T  \
1 N% r1 P# z* J. E& P, A$ @安装

npm install -g @vue/cli   
- A; u4 T1 {1 x1 G) H2 w

5 \# x0 J! R5 Avue --version
) R1 Y7 j* E# g5 f4 M  M
3 |5 f) x3 T8 ?' \
7 d5 F+ P5 Q8 P) |9 Z/ qvue create vue-plmhome02


: b* d3 R& ~7 c2 U8 V, _2 q4 Y) o; vnpm run serve

" K: W) J0 x6 X6 \6 d% Z' ~
, k7 n% s! Q9 m8 I4 p
, h: _: p% D+ h& s

admin

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

0 ~) V! J  A+ E: O. K$ f

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

) _; h; h: l/ ?# d' J* v; e* D4 y

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

! O, h3 s0 D+ O) N# H

<style>

</style>

5 a3 f  N$ }8 j" Y6 G. p) l$ H7 R. W

admin

数据绑定：
+ N$ v/ ], I0 \2 j
9 B3 D  H- A9 E
<!-- Bind Attributes -->
<br>
+ N( s- T# S- y$ r7 o<div v-bind:title="url">
% p, l+ |9 _9 l7 {' y& h( V5 m, M  "This is for the url bind"
. \1 L' w, C6 |</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
8 W+ t* M5 W; V  W2 K- s2 i

admin

数据绑定：
$ g  p( t: ^' M: x) z
; e$ U) x" n) R: z7 X7 z
( t+ ?: s' s* ]1 D8 |<!-- Bind Attributes -->
<br>
0 t$ Q; h" y, H6 R( o<div v-bind:title="url">
  "This is for the url bind"
% v+ d& e3 e) C# E% H$ E" Z</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
</div>
. ^: T( b6 S0 t2 v# [<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：
1 t) ^4 W0 O5 O3 r5 q, z& k7 \
3 F; |( [- j4 j/ q9 X
<!-- Bind Attributes -->
7 o3 V0 U7 ^; G5 ]: _: `0 p: f: P<br>
1 D$ x+ o8 Q) }, p  Y3 V<div v-bind:title="url">
/ z( S  Q) y3 Q  "This is for the url bind"
1 {- B: b  @  a6 Y) p</div>
<img :src="srcurl" alt="plmhome logo">
$ [$ V+ p3 W3 {2 @<!-- Bind html -->
<div v-html="html">
</div>
8 `$ w. B9 D; o2 f$ B9 C8 G# c<!-- Bind Text-->
: {. j) p: j3 C<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：


<!-- Bind Attributes -->
<br>
8 U  Y! ]# ]+ j+ L<div v-bind:title="url">
  "This is for the url bind"
8 \% v7 C! _1 E# r1 `" x</div>
<img :src="srcurl" alt="plmhome logo">
5 m3 ~$ I8 O9 P6 d* ?* K; h" `<!-- Bind html -->
+ C4 @2 ?/ Z5 g<div v-html="html">
</div>
# o7 G$ \* b4 }5 R5 b<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
0 q$ s8 n' s0 o7 g