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

admin

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

, J+ n6 |4 @" {) y# T（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

; D* X) f. Y5 J# j# Z3 f（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目
' s' B# H/ V/ {5 ~0 `
vue init webpack vue-plmhome01
" N+ s! _- z$ l* n7 X

% E5 A! y) c$ _  d+ T(4) cd /d D:/webdev/vue-plmhome01
, u8 }7 E! a6 S' P2 X( Y如果报错，再运行下 npm install
3 ^" R8 u5 T* V; q) i: O
" [! X& Q6 v, R2 Y3 u- Nnpm run dev

! H; a0 F& A/ X4 a, ~
8 ~7 f; ?+ c& b" e( I/ y

- b2 t! I( i% z/ Y6 W
还有一种简单的做法
1 P% B! s+ R: F* @
vue init webpack-simple vue-plmhome02
% S# Z7 ]9 y. a1 e0 \
8 @" w1 I! s& U0 m  b% Z; Q目录更精简些

admin

新版本安装
2 `, x* X4 q, W) `8 O
卸载老版本
/ p+ `! P, ~& V& \% R7 {4 z8 n
npm uninstall vue-cli -g
) Y2 f" d& T1 s2 Z) P3 K$ O$ ?7 _
# h) o" b6 n, E( O; Q' s' I安装
- ~1 C+ g6 Z0 P0 K0 e
npm install -g @vue/cli   
7 _7 E! B/ @3 w, f1 \- p5 J1 p

; m' L0 D  q% }) l) P9 I* @vue --version


vue create vue-plmhome02
& c- U5 G# ^5 F1 M. U! l

6 c1 v' b) }$ w3 o' ?% Y( s4 u' [1 xnpm run serve
9 S0 L% b* d: p& \* d
3 x& t& ]0 v" D" R" \& g- I; r) w
, x: C7 e3 S  P* z0 H+ ]
8 v2 G- a* Z: l/ G, s$ b


4 P4 g2 I: O7 N

admin

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

. z. W, ^% K9 k2 j

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

8 U+ u" S6 \( @/ n3 }9 h; B: J

  </div>

</template>

9 N% G% n* e/ Q* H! f- d  A4 i

<script>

9 x$ U/ j7 h2 H9 }& }/ g

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

( z: P" j) h) V- V

<style>

</style>

admin

数据绑定：
/ t  J% |' Q( T4 s2 m* v
. v9 v5 w0 x. c1 K  R7 r
<!-- Bind Attributes -->
( x" H8 G3 w7 s" Y<br>
9 h' r7 i9 z: j. u' S% n<div v-bind:title="url">
  "This is for the url bind"
7 I" h7 d' `) Q</div>
' w2 R. W+ E4 ?" L( f4 R<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
. J; l% G, {' x$ z! p/ I</div>
$ N; t5 Z8 c6 ~3 F2 E2 Z3 O. G<!-- Bind Text-->
. N! o  ^) n$ c; N8 s<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
, U, W4 Z, a3 d

admin

数据绑定：


<!-- Bind Attributes -->
<br>
4 p1 e7 {+ e. q<div v-bind:title="url">
  "This is for the url bind"
5 \* W* ]! @- L, `! ?9 d</div>
<img :src="srcurl" alt="plmhome logo">
6 u9 R% `& D+ A/ J: t6 T<!-- Bind html -->
$ }& q5 Y3 p3 g. n- A<div v-html="html">
  V. M4 i4 ^& R" ]& u# z</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
3 |6 g( U! ^  e$ H' M7 C! v7 X</div>

admin

数据绑定：

: U$ w1 u- T, A
  b5 u  o+ W; h) J( c<!-- Bind Attributes -->
<br>
+ d. A( h" w% n! b4 u<div v-bind:title="url">
' }2 @6 \1 }! F6 {  ]$ v. f  "This is for the url bind"
- j' R3 {3 s2 y$ H; Z( z  K</div>
' r  @/ u; ?5 d# d<img :src="srcurl" alt="plmhome logo">
( h/ b4 K  Q3 p$ V0 k<!-- Bind html -->
<div v-html="html">
, K1 J5 k) R/ A* g) w3 F( ~</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
; Q. c5 h$ x( x5 k. ~! g</div>
  L4 Y2 T* u# N4 B; s

admin

数据绑定：


<!-- Bind Attributes -->
2 a% r" L2 B/ Z. J3 p: r. ]/ l<br>
<div v-bind:title="url">
  "This is for the url bind"
* Y  R9 O7 p5 ^5 e: J</div>
3 r& {* n6 O/ G# _/ _<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
4 |( u4 ?2 x/ M3 v2 b$ Z<div v-html="html">
( ]% J# m9 P5 w, ^- {</div>
# e$ a# o% _$ b) Z<!-- Bind Text-->
: j0 P/ C; A5 _<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>