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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
9 f" \# l* ~( c
3 X5 q" n# y1 ~" [$ X（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可
) z1 x) |- G7 G
（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
: f9 S  B" r$ S& _0 K(3) 创建项目
7 C7 N- ~; K2 @9 B7 g9 x/ M' S
' c( c1 c  ?7 |+ i1 O& s. R( y' ]vue init webpack vue-plmhome01


(4) cd /d D:/webdev/vue-plmhome01
; i/ w7 v9 F# ]8 x, ?+ a0 O& |如果报错，再运行下 npm install

npm run dev





还有一种简单的做法
' q1 r; k" Y7 D% d( @
vue init webpack-simple vue-plmhome02

( L5 W0 D7 p0 B5 M# U, b目录更精简些

admin

新版本安装

. ]0 h4 O& J/ |) ?) o; T; p  {卸载老版本
& S  U. }$ u5 o8 {4 T/ _
npm uninstall vue-cli -g

安装
4 F$ P& f2 d3 w! p9 O2 c
9 r& x0 u1 z: x# gnpm install -g @vue/cli   


vue --version


vue create vue-plmhome02
5 W  z0 X2 E" s

! ]! t$ s: A. d% |4 S' jnpm run serve
  z0 [) V, x' o
# z1 J& Z, a7 N! {) K! d+ q, j2 ?0 s
2 \6 M* d: l! ?. H1 Z( O6 k, y

9 |8 g2 d# V$ Y6 D3 N" c, t

& `% S* P; \4 c7 N6 a6 H$ h

( I/ v2 u( R  @. T

admin

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

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

  n  M3 `$ O* ^. n1 t. e2 I

  </div>

</template>

% e1 L) ~, r! O  [) R

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

$ i$ x; V$ v4 f

<style>

, J  C7 d9 h, ^/ Y

</style>

admin

数据绑定：

& p; a3 R- r9 X. q$ e- r
<!-- Bind Attributes -->
<br>
9 w$ [; `+ H# H9 l( }* @! y<div v-bind:title="url">
  "This is for the url bind"
% D4 Q/ F/ r  |$ s8 k- z3 p</div>
' m* F3 a9 F: P4 |0 p" |( W4 `<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
4 V8 \* _. n% I: {/ p0 p# z3 N<div v-html="html">
</div>
! y+ x# y% t" D2 Q4 F/ X" r6 [<!-- Bind Text-->
0 `2 A* L. z1 K' @% `# F<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
- P, B3 ]) H9 w3 O5 K

admin

数据绑定：

! K" l- a$ c0 w
<!-- Bind Attributes -->
<br>
) T2 Z. \6 \1 E% h6 G3 C+ M<div v-bind:title="url">
# i* }$ P" B3 P+ Q0 _. i+ ?6 S; `  "This is for the url bind"
) o# y- N/ `3 d: ^$ `+ }' ?  T) K</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
* w7 P+ ^0 `5 d/ \<div v-html="html">
</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
2 u& y) l1 H4 V7 v# j

admin

数据绑定：
5 K5 D# B+ j) {9 x
) P2 J: P3 N' O# T, G3 A) c1 [- L7 z
5 b5 ?, Z! z7 e7 f- g! G  e8 t2 z<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
2 a$ a2 D9 x, ]) m  "This is for the url bind"
</div>
7 @  G3 n- C2 |, A! F- P( M<img :src="srcurl" alt="plmhome logo">
# S- q( z* K* B7 S<!-- Bind html -->
/ B( j6 ?; {8 ]+ \0 Y<div v-html="html">
( H4 Y7 v. d- I+ s8 d</div>
<!-- Bind Text-->
- L  F! u) s. R! f/ g8 P<div v-text="msg" v-bind:style="{color:'red'}"></div>
# g( r( m7 P3 B</div>
. |% k# Y) n2 b6 w

admin

数据绑定：
: i  L& t! S2 `
, Q$ L: C' b7 M" {
# s9 Q/ B4 B# h% |( y4 m<!-- Bind Attributes -->
<br>
) b8 y: U! G% v  B; |<div v-bind:title="url">
/ {6 t) g* r9 P- o3 a6 q3 [  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
. X7 b$ F( B+ ^; ?; N3 z$ B<!-- Bind html -->
<div v-html="html">
4 F6 G  T; _$ C</div>
<!-- Bind Text-->
% R0 w+ {. Q: P% |% q) ?<div v-text="msg" v-bind:style="{color:'red'}"></div>
1 o3 N3 y2 D! r& `: c$ H$ U7 u</div>