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

admin

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

! {. C( [& \, G1 K+ u0 i( C) i（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可
4 G* \) M" O( R& |+ w
9 H' g" s, ~5 G（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
0 G1 w6 V# R# L# ?6 a3 D" W! |# N(3) 创建项目
& P' {8 y; n! l, _9 _& c7 ^
vue init webpack vue-plmhome01

$ K2 m  s$ N6 o+ q* g' e% \
- c" t8 Z; D/ l/ g4 c(4) cd /d D:/webdev/vue-plmhome01
. h8 C( a' W7 |% A0 O+ g  u$ |如果报错，再运行下 npm install
+ l: s" R# ~3 p! Q" ]
npm run dev
6 W  e1 r9 K2 ^6 D( q7 _8 \8 ^' S



# o; w. ~, e8 ?+ m! D- [/ u
还有一种简单的做法
' y/ H1 ?, P* ]
vue init webpack-simple vue-plmhome02

( m. G7 u8 U" E2 F% v, e目录更精简些
; ^/ L9 H2 E+ g0 H. n

admin

新版本安装
4 F3 w4 U( W$ }3 V2 }2 m! G% e
: {6 t) ^( z9 V5 \( M4 r卸载老版本

npm uninstall vue-cli -g

$ u# e" M! ~% k0 _+ j, a安装

" v' n, Y) C1 x- fnpm install -g @vue/cli   


vue --version

6 o' L/ F6 P) Q. v
vue create vue-plmhome02
  K! b  ^% Y$ L5 [" O

npm run serve

0 ^6 `6 O8 I9 [7 _1 |9 c

* [0 a' V9 J) ^
, {( \3 Q; P# s3 H1 |; i+ m

6 C* f+ Z" f$ D4 {3 U
" S' }4 C6 @: r' t1 X1 I
: E  Z- j4 C9 W+ e5 h. J

admin

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

; r2 q/ K/ Z2 i; G- E- G% l; M

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

, H9 i3 f6 @0 Q' G; p8 m" `

<script>

" Y% k9 |3 `  a5 e' ^

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

<style>

- c4 M; W0 m  ~

</style>

admin

数据绑定：
; _) h! z' o, {
4 [: U1 z) Y' l, E- g; U
<!-- Bind Attributes -->
<br>
4 }- G" b' T# z* \- y<div v-bind:title="url">
# w3 E( \4 u; J9 c  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
% j. N: r8 U. D8 j# Q4 [<div v-html="html">
2 T" H* b# P0 T. `& Z; Y</div>
* h$ N3 V' \0 d4 L, j<!-- Bind Text-->
: C. k  l7 L0 p7 `' e<div v-text="msg" v-bind:style="{color:'red'}"></div>
3 M3 a6 `5 |% _" Z1 S% ]8 x: t</div>
" A. Y2 w' T# t4 m) I% T

admin

数据绑定：

/ C0 z. E! y9 \0 m0 w
<!-- Bind Attributes -->
<br>
4 D& V- A7 h4 d, k$ G* z2 {<div v-bind:title="url">
  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
1 s& d1 h( q9 d<div v-html="html">
</div>
; {; m/ Z' ?: i9 I) t1 V  l<!-- Bind Text-->
9 C; m+ |) T, m6 }) V# r( \$ B<div v-text="msg" v-bind:style="{color:'red'}"></div>
; N5 X2 B0 }( h+ J/ f</div>
1 ?  o! c: b# k7 L

admin

数据绑定：
4 \$ P* i4 r1 r- [

; P7 p0 |) M" K2 G<!-- Bind Attributes -->
<br>
6 ^8 M. }- U3 @: [6 M<div v-bind:title="url">
1 @  J5 s# F6 e5 {4 Q% |9 x2 R  "This is for the url bind"
  ]* A* t0 q: _8 p7 ~</div>
7 t, {6 |0 w; r& I- K6 U<img :src="srcurl" alt="plmhome logo">
+ r- ?1 ^, z% v; U! V2 P! [<!-- Bind html -->
<div v-html="html">
</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
2 h3 g. v0 }8 H- K

admin

数据绑定：
$ \/ q# O3 Q, m; O1 b$ M

<!-- Bind Attributes -->
+ v: B. \% M& B6 U9 h, w1 ?<br>
; W4 L5 B/ [" X6 A, |<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>
4 T1 S/ s9 {& X4 x* c9 N<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
+ n4 a, U- k2 ?