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

admin

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

（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

. q. T8 s* }; l1 K! g$ c6 t0 I- D（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
- {  J% b" F+ q; m# T0 J(3) 创建项目

vue init webpack vue-plmhome01


* ?+ w0 g7 c; d+ @$ M$ k(4) cd /d D:/webdev/vue-plmhome01
; H0 {& ^6 Z* g5 {+ h如果报错，再运行下 npm install

npm run dev
/ V. G# m7 G  W8 F# B


" O; A+ }$ b, y& M9 G! p% U8 c$ d, w5 [

+ x# l# B$ \% r5 ]$ Y+ @还有一种简单的做法
' e& `* o! ^3 W: v1 A7 n+ G9 s' l6 t
vue init webpack-simple vue-plmhome02
- y# _7 q3 ?! c" K' _4 r
# L( {- F* @; J目录更精简些

admin

新版本安装

卸载老版本

npm uninstall vue-cli -g
7 s2 A/ S$ J% z8 N) ~% _, I% l8 m
安装

npm install -g @vue/cli   
: X% H. ^/ b9 n* R' L: s3 y

vue --version
$ d# [. U' ]! x. l6 k1 J; v

! m: G; n) ^- K, i2 k8 J& {+ avue create vue-plmhome02

4 t* w3 I  m1 f1 b
9 D- u! S" M) Q6 Jnpm run serve
0 f3 E# ]' `1 E  r. v) r8 P
5 w  u, q6 J( s: L
! }# \3 r/ \( Z7 M! ?. `8 p$ V
& `. X' P- ~3 o3 X4 A/ @

5 |; d$ [: z& K! ]" _3 F

4 z, C3 r# m2 {

admin

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

5 H  y1 C3 s1 v$ y6 R

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

( h( J; w3 G, W9 p/ [' R( Z3 @" Y7 h

  </div>

</template>

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

<style>

! A4 o# i  z" a+ b- f4 f

</style>

admin

数据绑定：
+ s+ ]+ ~7 A! f" u4 w* [

8 x+ i, g, {4 a7 L8 S# t/ j8 v: ?<!-- Bind Attributes -->
<br>
* u+ d$ o- S1 A4 ^4 E0 u, ]3 H3 P<div v-bind:title="url">
/ X& @$ |& \  P8 g3 c+ m1 F# R) P  "This is for the url bind"
/ b# v  G# j7 n</div>
<img :src="srcurl" alt="plmhome logo">
; E! E" k" G% l8 y/ ~) c. u' X<!-- Bind html -->
( P- t9 k+ b/ q5 W& n& k<div v-html="html">
$ Z6 r( v5 B9 @6 E, V2 U</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
. H9 |3 R- N) J</div>
' t1 {, w; `2 E5 W7 b0 {) {4 v( L

admin

数据绑定：

5 `  Y1 j) l- V- }3 k2 l7 \; u8 E
/ O6 z& R! n# w: h7 h, O<!-- Bind Attributes -->
9 {3 c% W( `/ B7 Y. H8 m<br>
! Z) ]9 z) A$ v6 u% `  v2 {2 J  S<div v-bind:title="url">
  "This is for the url bind"
! g8 P. F( w0 B$ }# [' d</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
: U8 `# G" j8 O5 a. W$ S" p</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
8 O  s$ i; C+ y# o+ ~: h* F</div>

admin

数据绑定：

! D+ z2 P! d& v0 d: X3 G
7 Q; P9 Z, j% `9 I3 T<!-- Bind Attributes -->
$ k! \* @7 r; }( G<br>
( P# l; E! Q) O2 f. x<div v-bind:title="url">
5 k) w; E, L7 y  "This is for the url bind"
</div>
! A! e/ e. g- e' W! `" B<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
8 N* ]! a0 E+ m3 G& `9 O- w<div v-html="html">
/ z; e8 [( e2 V' L$ z3 h</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
! P7 `$ l/ n6 {6 }$ J8 V( X+ g</div>
! H& ~% I4 H( Z2 V, j

admin

数据绑定：
' o& U+ g! h3 K( |# i4 e
- v5 L/ r: M% a! m) o
<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
4 P7 e1 U' d, X" v8 }</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
# B6 M% `5 ^; j<div v-html="html">
& ~1 d" }3 X: g3 O! ?</div>
" y- ]! P% b% ~1 j<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
" Z, p9 @! ^. U" B  J</div>