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

admin

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

7 p9 p, i, \; j+ a) q8 x（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
4 C/ C! `( _3 Z  B(3) 创建项目

. w' u8 X$ R. ?# s! O  n% pvue init webpack vue-plmhome01
* R$ W* y' \, d
0 V, x) ?. Q; E1 K
3 g! l3 W6 M" V5 G. K6 K1 h(4) cd /d D:/webdev/vue-plmhome01
如果报错，再运行下 npm install
/ c+ ?* ^6 n$ t/ T
npm run dev

4 Z% W# a# ?, K' j. s* c
. |7 h. N6 M- d# S5 j
: \# Y3 R5 t& f( Y" s+ L" ^
/ V: F% `/ u2 Q- \7 A- f8 p
: D  A: G( |, Z* P7 S  \% F$ c还有一种简单的做法

1 R1 k" T- a  I9 I3 }vue init webpack-simple vue-plmhome02

目录更精简些
. o; H+ H8 z3 }

admin

新版本安装
: W! m6 f+ L$ Y/ l5 [% S
: k# ?. s( N& J5 z卸载老版本
1 h  w6 R4 U6 r* }  j# Y
npm uninstall vue-cli -g
8 ]  ?$ M! T9 n+ m) ^7 X
# r: Y5 |7 o$ [3 D! Y% n# R安装

; M. z" E. O$ H1 @npm install -g @vue/cli   
5 U* \  m( H; S6 ?* |7 N
2 m+ D1 {% ?) ?/ ~2 k8 w! c
! n; W# y+ L, c% M  M2 [- }vue --version
9 V# C8 v- b& O- P3 L

( t( e4 ]. [' t. }" p  Gvue create vue-plmhome02

2 q4 j/ T: g. Q8 N  D- B2 L4 M- K
; r' y  t+ J! f) k- g0 pnpm run serve
8 \0 r5 m" v1 o$ b- S: Q



0 O- t; x  \5 L2 B8 m, H
5 P% {" Y  N5 A$ \) i! p: s" L5 i

admin

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

5 n9 d% i6 Z$ K! _" R1 v

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

: a2 Z) v/ L4 }

  </div>

</template>

2 s+ N. J' Z  q  @

<script>

3 G' Z" N' s* ]5 N, }

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

( A& p, @: d9 A& i( {2 P9 G

<style>

: z' N& b& i& A

</style>

* h* l  h( l1 U

admin

数据绑定：


<!-- Bind Attributes -->
; O7 Y3 ], l8 A4 n0 q3 M7 b' s<br>
2 d3 Z; g2 F! W- |8 m<div v-bind:title="url">
  "This is for the url bind"
" X8 B! J1 R( [8 R! k1 Y</div>
- r$ f/ E3 X6 D<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
. _: q6 t0 {6 H8 m; \</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
% ?$ F5 i% O7 d2 \( k, a</div>
: l1 P* v: I! T& X, e' N

admin

数据绑定：

7 E: Y$ k' F- H5 q9 k% }
0 T4 W! N, I/ z3 X& J4 t7 o<!-- Bind Attributes -->
5 A, b: W) _/ d! n( j4 q' b# h<br>
7 F0 L7 @. K' G2 }/ [  M<div v-bind:title="url">
  "This is for the url bind"
</div>
2 \& a! }7 E8 t- e  j; T- [2 j% z<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
$ l) `. Y# P9 S5 Z" M0 _) Q</div>
5 l- A9 Q8 o6 i4 M0 R3 N; s7 ], P, I<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
. U0 g+ q. V# {3 }: [

admin

数据绑定：


<!-- Bind Attributes -->
0 q8 o$ ]* Z  c/ k( a) e9 d<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
' Z. }9 Q" L- l* a, q5 y- D<div v-html="html">
2 h- ~! I9 M- p  d" J</div>
<!-- Bind Text-->
0 ?$ X( q& G+ n+ p<div v-text="msg" v-bind:style="{color:'red'}"></div>
; u% n" Z- D5 z</div>

admin

数据绑定：

) e( K" r4 W$ s8 e
<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
2 f$ V- ~3 E3 j! `. w! p, m  @. i; q9 o  "This is for the url bind"
</div>
& d/ h. [0 I! A<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
9 ?0 f6 K" S0 e+ k8 W  m</div>
<!-- Bind Text-->
* K( i  Y5 m, T+ a% N: N8 b5 o<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>