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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
0 R1 ^2 o' s8 s/ y+ Y
1 I" q: ]! \# s7 `! s4 ^( p4 |（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

（2）安装Vue 脚手架
" n/ s! }: B: v0 Q/ c6 ~" s3 H0 y>npm install --global vue-cli  / cnpm install --global vue-cli
% F. A4 ], U  e; H' `' ^3 ?' D! L(3) 创建项目
/ i6 I0 C" Z  o' f( @$ S
vue init webpack vue-plmhome01
/ |" R" w$ O6 X  ^6 a" G

(4) cd /d D:/webdev/vue-plmhome01
$ \. V, X" e% @  q: F如果报错，再运行下 npm install

npm run dev
# P* W+ g5 B( @. ]; Z
4 z( X& X9 e- Q2 _

& J0 V/ h$ X8 ~# |5 K0 b
3 a. S2 Z' b- k- i
5 ?/ Z' h" g8 T, S$ d还有一种简单的做法

vue init webpack-simple vue-plmhome02
: l& X  B9 B  }# s# f$ {; N
目录更精简些
7 e6 \' f( m: P- J9 A% L

admin

新版本安装
! K! ?! F/ O0 q+ {5 c7 \8 J
卸载老版本
. o0 l6 q# A& n# W  b
$ O, }* D3 K% b# G# K- h" n/ onpm uninstall vue-cli -g

安装
: s9 J6 |2 h5 v- E: m# n+ }4 q
. _& O3 w: g% ~: rnpm install -g @vue/cli   

6 Y1 y$ a  ?- x* a
vue --version

& H; w1 }' F2 z' t4 M5 s5 X  e
vue create vue-plmhome02


npm run serve
. N# D$ u5 x$ \9 m9 m- R& {



" J/ j$ ]& K& M7 q- X
& W8 _. P- O( h# c9 `* q* v, _

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>

8 b; c1 L9 V: _9 p# p

  </div>

</template>

<script>

# E2 z/ \; w: i: u6 e% Z  a

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

, E8 Q* g3 T* v% W, `) f4 q. p

<style>

</style>

; Y5 T; Q# \* A# x1 s) J

admin

数据绑定：

# ~0 F  v, V. o% i
<!-- Bind Attributes -->
* t9 b( D6 x) Z<br>
<div v-bind:title="url">
7 c8 b7 t/ O. R1 R# u% q  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
3 [9 `( R, L) A, p8 L3 a<div v-html="html">
</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：


$ I; {: Y& j4 O) i# t. Q0 O. X  u8 E6 S<!-- Bind Attributes -->
2 E! V7 M" R2 H9 z6 B/ Y# K6 e<br>
3 ~+ o1 q6 U& D4 |8 R# l) {% S<div v-bind:title="url">
  "This is for the url bind"
% c6 o/ R. K- l5 A: L+ J1 q</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
" `, h' q0 L- b7 b! M+ p$ t: b<div v-html="html">
  V! j3 ^& }1 k' l1 P8 `4 K</div>
. y+ R" P8 r; T. ?<!-- Bind Text-->
6 D; g! h4 A. H3 m% h<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：

8 D4 D( Q) b1 G, d$ @  D$ h6 ^+ I
( p& c8 O. Z/ _% f- t2 p<!-- Bind Attributes -->
<br>
' M$ N$ L6 h2 I+ v/ r* s, e<div v-bind:title="url">
  "This is for the url bind"
# U/ Z& U+ c" b* l6 `</div>
<img :src="srcurl" alt="plmhome logo">
0 e/ T2 O" [0 s; @<!-- Bind html -->
<div v-html="html">
4 f' b* Y/ I) Z. W5 i7 m</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
$ Q1 m2 ]$ G' j& @: \</div>

admin

数据绑定：


9 f, [" ?1 H3 i2 w; d  j. r8 g<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
% {' P* q: t. ~& g' }. F* O  "This is for the url bind"
9 u3 ]0 a! F3 a7 l* w$ n% Q/ n</div>
( Q- Z" O  g: ?2 M5 P& \* _<img :src="srcurl" alt="plmhome logo">
: l( e. i$ [0 u9 M5 z$ W<!-- Bind html -->
<div v-html="html">
9 m  o7 r$ V$ L</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
5 `  d, d6 E5 c# X& o+ T7 |</div>