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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
) {' H; x5 Z& A3 U* B- y& I+ ^
（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

( n! g8 p  A& j1 Q; Q, W* j（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
4 E; A) T: g9 `$ a7 y(3) 创建项目

vue init webpack vue-plmhome01
! v, z* N0 T1 r  X( B
9 E7 n  Z. z8 H& M9 V
(4) cd /d D:/webdev/vue-plmhome01
8 U" w! N* z5 z% n- N* a! h如果报错，再运行下 npm install

2 I, N) g# K9 ]3 a& y  \( v% cnpm run dev


0 N: [( R4 r2 F4 j
+ B8 Y% a9 R  n1 j; Y! v

$ o$ `* t6 _/ x. v& F9 B! O: D; _4 N还有一种简单的做法

vue init webpack-simple vue-plmhome02
4 Y! R7 h0 G+ h  n5 l6 e1 E! M0 S6 s
1 r& W+ o' ?% _" D. k/ ?/ i9 f目录更精简些

admin

新版本安装

卸载老版本
2 K$ [/ l6 R$ J& S" l+ Q" H
npm uninstall vue-cli -g
8 e# f( N' O( Q2 C% s- y) i
安装

npm install -g @vue/cli   
2 a/ v. `3 s2 B( F8 N  F4 K6 [
9 x! m9 n( ~8 U; s4 v$ m
8 J: ]) h' N- q3 G5 m& cvue --version

* W! V' i! Y, v* M/ t. J8 |
vue create vue-plmhome02


5 e1 q# c7 i+ M9 S6 @% Vnpm run serve
$ [% M2 Y7 f9 X. @( D





. h! R- j/ w, U, x
, |' S! O2 _, ^1 \0 R2 M) P
. J! `5 N& s7 F$ q

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>

  </div>

</template>

5 N3 `  l1 f/ R( V, `4 c0 s# a

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

<style>

; l3 G- Y0 C2 E+ \

</style>

# y9 P8 R% z3 r! p4 Z& ?; ^1 @7 a

admin

数据绑定：
2 t: U+ z' u+ H1 I6 Q
7 {% t8 Q9 B6 O' s+ U  Y# L
<!-- Bind Attributes -->
<br>
3 z1 t+ X% e* o) x% Y8 C( S<div v-bind:title="url">
' G/ A- s6 R: |. V8 k  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
: }# A/ A  l2 X9 E2 s<!-- Bind html -->
% i3 p* R+ N" j<div v-html="html">
</div>
* k8 R% o6 s: l' i<!-- Bind Text-->
! g9 j% f4 F) V* O# }5 }<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：


<!-- Bind Attributes -->
; r$ ]- {* g: R' z<br>
: ~8 W5 i0 u* m# V6 ]<div v-bind:title="url">
  "This is for the url bind"
</div>
$ E. _) v' i8 |; I9 k<img :src="srcurl" alt="plmhome logo">
7 \  V9 r# L, b% _2 w9 s<!-- Bind html -->
<div v-html="html">
8 y) ]' N- I& N0 p</div>
<!-- Bind Text-->
1 [0 ^! D" z) r4 U' K+ p- z<div v-text="msg" v-bind:style="{color:'red'}"></div>
7 i% _) g0 C0 f  H</div>

admin

数据绑定：


<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
) E% i7 c% A: N0 v6 V' A3 d3 ?  "This is for the url bind"
</div>
- z6 S( @: B) H) ?  B; s<img :src="srcurl" alt="plmhome logo">
; n0 @& m% j4 p9 C  u* R<!-- Bind html -->
<div v-html="html">
) x- D. k4 n, L: b& _$ _4 |</div>
- N/ _+ a9 W7 n3 P6 p3 V' U: `<!-- Bind Text-->
* I( c' C# l& X4 N8 y% t- y/ I<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：
3 w! `  Z; S; k9 [
; J# U7 d' a  K. y* N( d
  W, ]2 F; f; s+ @, D<!-- Bind Attributes -->
<br>
2 C  K. j" }6 i<div v-bind:title="url">
. O! t6 I6 I7 a5 |) s  "This is for the url bind"
" E" K+ G; @0 K; u* M. O& o8 I</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
6 n0 p! n) b/ A2 L$ T  B( }0 Z& q<div v-html="html">
1 j7 G2 O, O0 a7 V4 M" A</div>
<!-- Bind Text-->
2 M' s" M/ [! M<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>