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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
! B' H( W' _4 N0 }8 Z" ?9 ]
（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可
8 B! @$ h. ]9 @$ X; P2 S  G6 \5 E$ p
$ e3 E  f3 j4 d; ~0 j4 S* t4 B. s（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目

- k3 d* w: \4 Zvue init webpack vue-plmhome01
2 M8 X; c  ~- D. e7 q
% T% P  D) v* W- m3 f- l. Z
(4) cd /d D:/webdev/vue-plmhome01
; {1 u8 M2 U- l  p" ~, K如果报错，再运行下 npm install

( B" T  `' O2 [" rnpm run dev

" p! K5 b; Z0 M) x, G, g



还有一种简单的做法

vue init webpack-simple vue-plmhome02

0 c' j; c, @' H: `9 }+ `目录更精简些
- u/ D8 B; f1 [5 f

admin

新版本安装

卸载老版本

npm uninstall vue-cli -g
" s9 q2 ]- w4 g1 Q0 w  _  V! u
+ g0 `" }' v; I' l9 d安装
( y6 x2 _& x6 L. V. x$ `
npm install -g @vue/cli   


vue --version


vue create vue-plmhome02
0 x! o6 u- p; b; T2 q; r  p
! X. J. u% R) h6 ~3 w
8 e/ T5 Q1 X7 w, L  Y: [  [npm run serve




/ ^% d8 H3 s# |! Q3 D5 P

$ q! L) J4 b& _9 _0 t0 D) l, H
! M+ r+ Z& Q" @
% H) x, J0 c$ P2 e: _

admin

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

2 z) y% _0 M5 v& f# o

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

5 \7 u5 G/ o; J6 Y; ]

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

9 s! n# d& N# A$ S1 ^

<style>

4 o' B- D  _- h1 s4 U! h

</style>

. f' y, E) C. t2 b: |. H

admin

数据绑定：
1 ]& A( e, Z9 T; ~' h7 L2 V
4 ]1 ^3 B, a- t: \1 z, x
1 ^+ [' c; D# `8 x3 k<!-- Bind Attributes -->
7 Y. x: c7 K1 c2 T$ ]<br>
<div v-bind:title="url">
8 f* n+ J- u* t( a- Z* P" k/ a" [  "This is for the url bind"
- U: P' ?6 u5 ^% Y' K9 E</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
4 Q3 `% ?* n/ D  M' |! G5 P- W  e</div>
<!-- Bind Text-->
* t5 O9 L; q, X3 B6 z! e<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
6 V( Z% W5 O, S* ~

admin

数据绑定：
5 D$ d& [- d: a  n
% ~1 u; Q+ R) G. E: u3 B9 p8 t
<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
</div>
6 C4 C4 j& C, t, M+ N; I+ ?<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：
' s7 W9 N, Q# i/ f# h+ E
7 z+ l5 E) a2 C& E2 I& p' n
<!-- Bind Attributes -->
<br>
0 i) A/ d/ S8 V<div v-bind:title="url">
  "This is for the url bind"
</div>
! i% {/ U0 D8 n. ~8 d. Z- [9 x<img :src="srcurl" alt="plmhome logo">
# i3 a9 J& o( x6 w<!-- Bind html -->
+ j8 T0 v. [. l5 k' v' ?5 r7 n9 i8 }<div v-html="html">
</div>
, Q) i2 p7 h% [( X+ T1 d! @5 H<!-- Bind Text-->
7 Y( p% O5 D% s1 H3 z" [<div v-text="msg" v-bind:style="{color:'red'}"></div>
8 z2 q# t" i  Y+ c/ M: k</div>

admin

数据绑定：


: A2 J: h/ r) B( H3 i<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
3 H/ l  c, s9 j, u: a: K; e* o</div>
<img :src="srcurl" alt="plmhome logo">
. S: @# ^2 y* ?4 c; g<!-- Bind html -->
. O0 X3 M  c( v! k7 j* [<div v-html="html">
</div>
<!-- Bind Text-->
/ b! m1 n+ m$ F, r! ~<div v-text="msg" v-bind:style="{color:'red'}"></div>
. t/ i: T4 {% @  x</div>