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

admin

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

  h! x) K5 ]$ h（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目
+ N: Y# F1 T2 c6 V  {* v' }
) ?! I& ]- n/ J! d5 G' U7 a- _vue init webpack vue-plmhome01

% R" H0 q6 U$ I- B3 |
" E$ P! g0 J& Z( o6 t4 p(4) cd /d D:/webdev/vue-plmhome01
# t0 A% [6 m- w8 B如果报错，再运行下 npm install
! @9 l( }1 j' T' [
npm run dev


& z7 V. ?5 l! S5 o9 [! A( d$ c

6 p' X& ^4 l. N. F1 k
* |  c" ]- n* {4 U9 M( ^2 K还有一种简单的做法
' I7 X$ \$ |) Y& }" l
! W; `$ P/ c* ^/ Wvue init webpack-simple vue-plmhome02

% Z; z1 h* Q, B目录更精简些
# n, n# I3 v' P" i- t& K8 U

admin

新版本安装
& Z3 ^. T4 I% X  {! B( q+ h9 C
卸载老版本
% s) ]5 g( N4 D/ l! i
! U8 G+ [" u# q+ [, [npm uninstall vue-cli -g

安装

/ Y0 E3 a3 M1 z, r9 xnpm install -g @vue/cli   
, Z5 x; v- [* x7 d( ]* |

' z- P: J$ Q" B& _+ _vue --version
2 M2 a- N( m; R) r- t
. Y; k. f# h. _- Q( Y1 Q
5 C4 m4 I( J3 T2 h# I7 Yvue create vue-plmhome02


npm run serve

* n* a8 {) g& f* d2 @) `" r$ @


% g# w& J  o" _1 l
- r- b! G4 X. Z. N

: C7 u& m7 t: b' b$ _

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>

  </div>

</template>

<script>

( u9 G& R! r  q; X+ ~' x5 v7 T

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

<style>

</style>

admin

数据绑定：
2 I* p. G1 C7 M

- }2 n  B, |% s  H$ m6 l* q& D<!-- 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>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：
/ D, A8 G( I8 j
% r. s9 Y6 X$ S5 l
9 @' w) t) [; L9 A" D, L- \& u' L  u<!-- Bind Attributes -->
<br>
9 }: Y2 J# j, ?3 ^. t, U2 q: n$ ^<div v-bind:title="url">
  "This is for the url bind"
</div>
# b2 m% ]: `, B# y<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
+ S  S; j: s- w6 s<div v-html="html">
7 `1 A: D% a: b1 ?; f1 T0 p  M</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
* A# c( ]" Y% H$ h' _7 Q</div>

admin

数据绑定：
8 q. y) w3 s8 J6 p$ T1 R- f

, R( A% V+ B1 ~; }$ [  _) @, Q<!-- Bind Attributes -->
<br>
* ?7 b7 K; s8 ~<div v-bind:title="url">
  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
' w* z9 J6 @: j: |: y% m3 j<!-- Bind html -->
0 b3 z: @: U( I  u5 S. z2 q4 w5 I/ t<div v-html="html">
</div>
<!-- Bind Text-->
: e9 C/ X) g" r5 c, K$ G<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
% {9 k1 d; a4 \4 p! p7 n" p1 h

admin

数据绑定：


<!-- Bind Attributes -->
2 ~) m2 K7 J4 I# ~- m<br>
<div v-bind:title="url">
  "This is for the url bind"
2 |2 i! J# O$ K$ {2 P3 a</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
- {: j) s2 y8 a, t" ^' m: {<div v-html="html">
9 J& S$ e' ]) |3 k9 ?</div>
5 a5 b' _# k) r  `<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
) `9 q. n  v' R' y</div>