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

admin

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

（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目

vue init webpack vue-plmhome01


: \3 G2 W7 Q2 K$ B1 ?/ F' E(4) cd /d D:/webdev/vue-plmhome01
" I8 w8 t8 Z$ Y2 G- }$ h. r1 U如果报错，再运行下 npm install

) n+ I; E; q, |* gnpm run dev

" j8 e$ L1 B2 _) i2 X% ~+ ]. e
% F' v  u' A: [" F' Y
2 K0 X& C5 C$ \# E* t8 u, `
/ m1 C/ {, M. A" ?- k9 ~4 _: O4 Z
还有一种简单的做法
+ W5 O8 ?1 Z" X1 A5 H5 c  J
$ A3 I- J3 Z$ l2 B9 v" n2 S/ u7 |vue init webpack-simple vue-plmhome02
* n+ B; V* b) V3 u/ [% {0 G8 ~
7 J2 X  L: O8 B: {目录更精简些

admin

新版本安装
. n" ~: q) E2 [! _1 q/ P3 n: J
6 \7 ?+ c  }! o, F卸载老版本
) z2 V, B  l0 H! b6 Y8 g* W8 L* Z( c1 T
4 M0 ?. D/ G3 {: u/ w8 ^4 Y% t- F" lnpm uninstall vue-cli -g
: y% ^) v7 D. D
" _1 _$ t# }! Q6 L安装
6 t! L. k9 e* ]
npm install -g @vue/cli   
0 V: ^7 {" l6 C6 c
" P6 l7 F3 a1 ?9 N. z. p. o
vue --version
/ ]# {3 z' K& R) t

vue create vue-plmhome02


npm run serve
$ t1 r; d/ |& Q+ e, ^4 ]3 z: k
6 ~) R% c. V/ x0 z: ~2 p- j* F


. D4 f! c' h! w4 T1 r
. D- t. F1 Y" N! ]  B3 R" c0 N
$ ?* E% A7 {- w" Z$ d

9 Y# ~5 I5 L8 [$ n' k% l2 D  v

admin

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

# ~$ `- w$ J; b( `4 W

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

: r: }5 B# l& V1 m

  </div>

</template>

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

<style>

7 C* r' N: Q5 Z& O4 n+ z4 j: g' F6 {

</style>

admin

数据绑定：


+ E* }1 J) T- }, P* d) ^% A" ]<!-- Bind Attributes -->
" z0 W* W) W* \& Y6 B9 T. @<br>
<div v-bind:title="url">
8 d; @( j  K# B  "This is for the url bind"
</div>
- n& g3 Y9 p0 S" _<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
& h+ |  m/ w' _$ a% a% c<div v-html="html">
. w1 ~$ v* e: b! o; w! d( q% w</div>
/ Q9 ^, D* F+ e2 R+ A- J4 S<!-- Bind Text-->
8 i% e% J3 H- b0 I# H<div v-text="msg" v-bind:style="{color:'red'}"></div>
. L8 E! W" a3 @+ _  ?. c</div>

admin

数据绑定：


! Q% H) _8 V6 Z6 Q; Y: g<!-- Bind Attributes -->
# p) E/ O% ~" f" b* s<br>
& C+ G% I' N2 U3 F<div v-bind:title="url">
  "This is for the url bind"
</div>
1 w0 V2 e0 u- a1 A( [7 O0 R<img :src="srcurl" alt="plmhome logo">
2 v( y. F6 }4 o2 V<!-- Bind html -->
<div v-html="html">
1 E) ]  d- c1 ~  L, J  Z& X</div>
: _  j+ M5 S% ~( q& {<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
. N7 P; b% m- |  w</div>
. ?& `7 R9 |! o* C6 D7 M" I' _0 E

admin

数据绑定：

/ I' F% M/ Z6 L) u* V# }; T; y
! D: |! |; k4 [9 n<!-- Bind Attributes -->
( t) i4 {1 U7 [4 E8 L4 l6 ]* C<br>
! R# P5 g5 T( y% w. J2 C<div v-bind:title="url">
, D2 A6 u7 y/ Y' W7 T  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
9 E7 k7 M" n! M6 N2 a4 H! q: \<!-- Bind html -->
<div v-html="html">
</div>
. t9 c- q3 S. V5 o4 _<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
. `9 A1 E7 I2 Z' u9 w/ l</div>

admin

数据绑定：
+ F+ w9 _; L& V/ F* y
& _% r4 s5 y  m' o: D. C1 L
$ d3 _$ t6 h# l<!-- Bind Attributes -->
9 c3 E, s$ L2 {, }$ v( H2 ?<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
9 v0 S. `, O9 E' g& Y<img :src="srcurl" alt="plmhome logo">
7 q" R. F! Z  [* o<!-- Bind html -->
<div v-html="html">
# p8 X' O# I8 F</div>
<!-- Bind Text-->
2 {5 C) X. U0 e3 p* R! _4 M<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
! q1 x6 c1 D" W. o9 Y