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

admin

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

（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可
7 t9 D! x1 k4 s! ^& P
" {7 K/ X# F! u6 I* W, O) l* F（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
8 S0 U# [% R/ Q: b8 B- i  i8 _) O(3) 创建项目
) N7 r$ v6 U: I6 h4 A2 A
vue init webpack vue-plmhome01
# S* L, ]. R; H6 D

" W1 P* M: v& B3 Z+ f(4) cd /d D:/webdev/vue-plmhome01
如果报错，再运行下 npm install
7 d$ V; E& p1 D# s
npm run dev



8 S  o* i) o* w& A

# K& d. s! h- i) P3 I: v, m还有一种简单的做法
" ]/ R; }* S+ y! ~" P' _
9 j8 A4 Z! r% Z  g' Bvue init webpack-simple vue-plmhome02

目录更精简些

admin

新版本安装

卸载老版本

. j9 M# S8 n0 K% `# a) snpm uninstall vue-cli -g

( _; F' W; `2 ]0 S8 z; g安装
6 W7 C" {3 L) \1 O
npm install -g @vue/cli   
9 m" [" J9 q/ W1 r

vue --version
! ]! l* W* x, V( `1 J3 b& A0 q( J

vue create vue-plmhome02

* m, M% t# y* t) A/ C
npm run serve
: T4 H/ z0 _* e; Q: Y
0 ]% R& Y3 D4 k: `; D
5 @5 n, M  c% P

( E  G6 E( h* o+ R7 }4 s7 Q

admin

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

! w7 w7 ]" a7 `$ V, G

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

+ k$ N9 |5 r: G3 m- ^! T

<script>

# B1 v; |7 M8 f  h9 C5 D! I: Y

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

% ^$ b; @7 x: D8 t7 a. N

<style>

</style>

4 g8 {  _% }; @0 ]

admin

数据绑定：
) T/ w! ], |) Q- |' N
9 M& q2 r+ s/ m! K. F
<!-- Bind Attributes -->
; u! a3 b  l& n2 o6 ]<br>
<div v-bind:title="url">
# y9 f7 g! A: Q8 F! I  "This is for the url bind"
</div>
9 k5 j8 l) e# R<img :src="srcurl" alt="plmhome logo">
: J9 f. R* F; g% c2 Y<!-- Bind html -->
2 P# g1 S9 k: p<div v-html="html">
</div>
<!-- Bind Text-->
3 B9 k: e& L; B# T" J; U% `<div v-text="msg" v-bind:style="{color:'red'}"></div>
' y9 k9 U7 j/ ?. a5 N# e</div>

admin

数据绑定：


& v, {' H, q- K. O! z; ]<!-- Bind Attributes -->
5 d" b. _3 Z8 L" t* f7 k<br>
<div v-bind:title="url">
4 `9 f/ D4 {6 t* J  "This is for the url bind"
& j' ^9 y5 g  L0 C</div>
/ v9 \6 _$ J# K& f<img :src="srcurl" alt="plmhome logo">
& I( ^/ H3 ^$ N6 t<!-- Bind html -->
<div v-html="html">
+ W2 ~& T/ v# D' p9 I</div>
<!-- Bind Text-->
8 v3 T( p: m2 B<div v-text="msg" v-bind:style="{color:'red'}"></div>
/ Q5 u0 G9 E0 R; l6 C! Q# N</div>

admin

数据绑定：


<!-- Bind Attributes -->
<br>
9 c2 Q+ Y4 b0 M: c<div v-bind:title="url">
2 k3 f* d; x7 e; a  "This is for the url bind"
</div>
0 Z' G5 H" r2 W0 q6 k2 g2 O<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
1 |' X: U0 S7 N' K; G<div v-html="html">
</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：

$ U  ?+ S* C% v
6 y. u3 G( O6 y" d<!-- Bind Attributes -->
7 s& g  V* r; n  {+ v8 c% W! \<br>
+ l& f7 E. C: n- F# M9 A<div v-bind:title="url">
9 Z' O; z* }2 v( r* S( p. w  "This is for the url bind"
0 y# b$ |) ]6 ?" {! f. t1 J0 a</div>
; P1 B0 U2 w, n0 M/ e/ k4 C& G7 A<img :src="srcurl" alt="plmhome logo">
7 M& n6 v# n5 e! _4 n  C7 O<!-- Bind html -->
) l/ @0 h* _  U$ s' n: H) q% i! [<div v-html="html">
  u$ W( D) V4 ^) l2 u! F6 ~. N</div>
' `% Y3 C+ \" A9 b$ ^: j/ o<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
& L1 j. U) O% A* I1 U5 M- Z