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

admin

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

（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可
0 B9 r4 L' ]; B, L" h" ~  r5 G) I
（2）安装Vue 脚手架
  e6 Y" d; n9 v! A, ~- P8 h; b>npm install --global vue-cli  / cnpm install --global vue-cli
, @" E6 m5 u6 u7 A/ K3 y) O(3) 创建项目

vue init webpack vue-plmhome01

8 l# S: ?+ r" t4 I; W- r
* L9 W0 a% |" [& U4 T6 @(4) cd /d D:/webdev/vue-plmhome01
如果报错，再运行下 npm install
& L! C: G  ]  s; W4 J" y6 g% }
" ^2 `) D: b' F+ r& jnpm run dev


/ b9 w! u0 m  O" h

) G. j& J4 V4 \6 r; C3 J
# s4 y% K4 W% i# U* _% K还有一种简单的做法

vue init webpack-simple vue-plmhome02

目录更精简些

admin

新版本安装

2 Q; q+ g; V9 [$ X( O, }( i% P7 y卸载老版本

, y4 `  t% y  E: Tnpm uninstall vue-cli -g

安装

- g* Y4 l$ R, v+ ?" O3 inpm install -g @vue/cli   


vue --version
) D1 D& [, E5 u8 @8 W5 V/ [' Y% G- g$ r/ K2 M
( x) x7 W; J' U+ v
& O. D- ~4 M4 ^/ B7 dvue create vue-plmhome02
" y5 K' y$ p& v1 t
" W4 j8 `7 E* l9 ^- X! W! ]. A
1 l3 _. v6 ]5 C* t, Z" s! G4 Nnpm run serve
- L) Q, f4 n! \$ u

0 j% `9 e1 H: i/ ^# ?  b0 w* t
8 p- K9 M' Q' J2 ?' U! d5 Q4 ^; n

; n$ G2 k8 X3 l1 Q: m
; K& l# b, S; ?( P* U& |! f, x6 z

admin

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

' m9 `4 D5 C  }- P$ x% J# h

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

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

1 W& r. D! J9 I4 }& w9 Q6 D/ z- W

<style>

</style>

+ F& m" }3 J5 N, |" d# `& b

admin

数据绑定：


* x4 @+ k& f) N4 X$ M9 b& Q, I<!-- Bind Attributes -->
<br>
4 X0 H. i* V. b' r# u0 N<div v-bind:title="url">
; Y8 j- U- u' D6 j7 v5 g5 K- N2 u  "This is for the url bind"
7 j  _, a. O  f: ?</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
" h" N. k9 G; K; m+ o- l# O$ \2 W<div v-html="html">
; A1 z9 c* F, Y- h0 O1 W9 _</div>
7 y$ i" Q1 P& K- ~  F7 ?2 g<!-- Bind Text-->
# H( p& I  T; U( s9 I5 W6 I3 @<div v-text="msg" v-bind:style="{color:'red'}"></div>
2 A6 j8 z) l4 S+ }# d</div>

admin

数据绑定：


- Q& V6 O+ q) u7 w, F( Y<!-- Bind Attributes -->
$ C7 n1 Y2 w; B% o: b! n  R<br>
<div v-bind:title="url">
) g3 U6 S" x: R- Y  "This is for the url bind"
- t  \9 L) H! P" L) k. a</div>
<img :src="srcurl" alt="plmhome logo">
  V$ @1 L/ P, z, L) [& V<!-- Bind html -->
$ z  c) t3 L& b5 G+ ~<div v-html="html">
6 G+ N. ?3 I) P0 {</div>
( m& J1 _$ z, l1 G, m0 ]6 c& B) _6 [<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
9 S4 l' J6 {4 h6 V. `' b4 T: n</div>
1 B& q2 M$ i2 S& H$ j

admin

数据绑定：
: C- j+ |( N5 ?( f! U! E! e

& J1 Y; p2 A; J9 @<!-- Bind Attributes -->
$ p1 D' A! G/ l<br>
/ v. X5 {1 T3 n* o6 \<div v-bind:title="url">
* I; L# B2 U+ T6 y/ |  "This is for the url bind"
</div>
8 z+ @: U; O# ?4 p& d% h<img :src="srcurl" alt="plmhome logo">
( Y- [2 D8 T# w# ]/ q; B<!-- Bind html -->
<div v-html="html">
; m: i9 K7 {# j# R4 D- j</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：
# G2 m2 |, s7 F/ H# S3 ^! k$ w/ |0 \! O

<!-- Bind Attributes -->
* W, y3 j: l! |1 H0 N* P/ o<br>
3 `; G7 S( x6 n6 v6 ]6 \<div v-bind:title="url">
  "This is for the url bind"
; }% U# m, v2 E( S7 ]</div>
( A9 l3 s/ O6 ]5 h& ~9 V7 W<img :src="srcurl" alt="plmhome logo">
$ P3 o7 P9 S3 J<!-- Bind html -->
<div v-html="html">
- F; T) G8 v9 n1 z, g" m" Y) p/ i' Y</div>
5 ~7 n. y# x/ B. T. M% N3 D# \<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
2 l6 Q' B+ \" Y7 Z0 J