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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
+ }/ c! Y* _: _/ b7 ]+ Z
（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

（2）安装Vue 脚手架
% T6 I9 R: a, \' ^>npm install --global vue-cli  / cnpm install --global vue-cli
+ D! y7 \8 x* H4 C: ?: `(3) 创建项目
' B7 h, `9 [+ u1 {7 @7 M4 i
) ~# c! ~8 R3 W! x0 S; ]vue init webpack vue-plmhome01
1 @0 m3 b( z  g0 k+ v7 S9 F: B

(4) cd /d D:/webdev/vue-plmhome01
如果报错，再运行下 npm install

npm run dev





还有一种简单的做法

vue init webpack-simple vue-plmhome02

' a2 l+ j( w; a6 |$ m& q目录更精简些

admin

新版本安装

. ~, [0 _3 O1 V6 U2 i- r6 Y卸载老版本
1 S7 f- K1 E1 J9 o$ S- U7 G4 A
npm uninstall vue-cli -g
$ T* X% u5 @; c: Q3 D! O% g
安装

. W( |) S; l! P3 }- j. e4 Q" mnpm install -g @vue/cli   


; b) c. m0 L% S  Cvue --version


$ m9 ^( j6 ?5 S; M: `! {% u2 M; ?vue create vue-plmhome02


npm run serve
! u9 x5 t2 Q# `# [


0 X% v' }2 I0 z% b6 \) C7 S$ A
$ r8 b) n  P/ `3 _/ L$ W


: R1 u; u4 P/ |5 K( x) U

admin

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

5 ]8 Z! H9 n9 ~/ e

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

  g0 N/ v" n3 K* q

  </div>

</template>

  y5 I  `- s+ A

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

3 d+ j0 u+ T* v0 V7 M+ I$ n

<style>

0 {' _4 D3 G2 r! l1 j; d

</style>

admin

数据绑定：
: ]/ k1 O8 E# Q9 A6 Q% A

$ o! G4 y3 S/ D/ X) ]$ e<!-- Bind Attributes -->
% Y( J- l) ~1 a& o<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
- _  _5 i- k5 b7 _3 y+ t. d1 p<!-- Bind html -->
<div v-html="html">
</div>
0 p& ^& a+ o( w2 I1 @9 v$ Z; W  K<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
6 a5 ]8 l7 E/ x</div>

admin

数据绑定：

1 R: z/ \" g( L# u9 p! M0 M
' ]- R% ~( H) n, O' _<!-- Bind Attributes -->
8 V/ T" J" c  O) a0 b3 ^& F. q0 Q<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
+ z8 H3 O0 Q" ?" u+ V# ]6 @4 N<!-- Bind html -->
6 }- a( }2 Q+ u) n& v<div v-html="html">
</div>
<!-- Bind Text-->
, C8 T, a, U( l# Q6 P# X<div v-text="msg" v-bind:style="{color:'red'}"></div>
' X% x$ m2 [6 p</div>

admin

数据绑定：
: |: Z% `. H. g1 F3 D9 b* _9 h% N
! C/ x$ A- \5 F: l8 l
<!-- Bind Attributes -->
/ d+ F5 {9 p! C& P6 l& O7 d* A  F<br>
<div v-bind:title="url">
  "This is for the url bind"
) [9 n3 S8 X% g: Y, N</div>
<img :src="srcurl" alt="plmhome logo">
% b& G& b6 M2 ~/ H" j9 D/ ^9 D; F& w<!-- Bind html -->
- ~8 [% T' N8 r& b<div v-html="html">
</div>
, v, P! c' F! u8 m* u) o1 K<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
9 {$ l4 E) y6 |</div>
; ^6 \# _- v9 x6 ^4 y

admin

数据绑定：
( V/ Y0 x' a% f- M* o- f$ N: {6 h
& t( f+ k/ f0 R
& {. [2 ^3 g* g5 G8 H<!-- Bind Attributes -->
<br>
1 ]; y. |2 C, Q: i<div v-bind:title="url">
  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
+ \: D7 t8 r+ {& u<!-- Bind html -->
<div v-html="html">
% w4 K' F" f3 U% V7 S! T& F</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
. c  D4 {3 L( A2 d5 w" U</div>