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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
8 F- |: M/ R* a0 ~! f. Y7 L
' ?, ]; K  @: S" N6 M( b（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

（2）安装Vue 脚手架
0 U7 J4 ~$ L- |4 `* q; U>npm install --global vue-cli  / cnpm install --global vue-cli
6 @" E) {/ r1 B6 \$ f  A(3) 创建项目

vue init webpack vue-plmhome01


" p3 p9 u- ?* _(4) cd /d D:/webdev/vue-plmhome01
5 d7 ^; S8 ~7 L" g/ p/ \% U如果报错，再运行下 npm install
4 {) |4 i7 l% M& y- |; }  ^
# W! x9 T0 e$ W4 \) S5 inpm run dev



* {! j! w  y" t  [9 r8 Z* L
  y2 J# X; y! E9 r' c
还有一种简单的做法
) X3 ~6 [* m  M! t
+ G1 s7 S3 ?7 ]( W) h4 c# Avue init webpack-simple vue-plmhome02

6 v. Z' x: F  f1 Y2 F目录更精简些

admin

新版本安装

卸载老版本

npm uninstall vue-cli -g

安装

+ Z! c; }% F8 A! A" @npm install -g @vue/cli   


6 g6 m' d8 s5 C6 q2 wvue --version

7 u$ d% P9 @" p. N) q% l6 g, @4 ]
5 |1 c* ^4 e- Vvue create vue-plmhome02
0 C3 c1 ?) V+ H! ^+ I1 w

npm run serve
7 u( F" x7 K" `' `& |+ S
3 s) V: t' j- U
% d. a" c+ A- @9 I9 y% y  _' V# D4 k




/ ^% K+ v( j! a% X9 n4 r+ H
; E& K5 `: K! B3 C( m

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>

+ ^' G$ I0 h) a  p* _( V, E

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

% N. p  U" @7 w1 ^$ ~5 K2 X8 }

<style>

* P, W5 F  `  r+ D/ p

</style>

1 G: S. W6 \% M8 ?, m0 y

admin

数据绑定：

, ]0 K; C2 ]3 S4 |. q, z5 d# n
- Z6 @2 j" m7 J! R<!-- Bind Attributes -->
6 W( w. E  n! M( [/ Y2 S' S2 j  b<br>
$ q( I% u. P% I) D<div v-bind:title="url">
  "This is for the url bind"
, G$ B1 A! p* Q, E</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
# ?- I4 P9 D' t2 y" T: ^</div>
/ [- `( t( V* {! d# I, |

admin

数据绑定：
  b& r7 \/ x- G' w
. k. ]& |* j! a' `) k- h) x
7 y7 y1 x. `! _; [" y<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
( r: o4 g# ]9 S4 y0 e7 ?- L  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
# a* `5 m/ ]- ?9 X9 D0 H</div>
* D1 Q4 D8 C& Z8 u<!-- Bind Text-->
' `, @0 g- t8 S! q$ q0 q8 h<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：


& o4 X3 Z$ Q8 \; T. w<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
; n( a$ l; d; C; |! h. h, E2 I. z  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
' [. b( H& E; H</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：


<!-- Bind Attributes -->
' j. L7 P/ K+ G- v: F<br>
! |- r' w$ ^5 U: P. m& Q) K8 ~<div v-bind:title="url">
  I, @# p: G& N8 [2 _# B: A  "This is for the url bind"
! `5 u5 \# l" n  a. B1 o* |1 r. f</div>
<img :src="srcurl" alt="plmhome logo">
& _9 X3 l; x- x$ e. ?" M# I# W. C<!-- Bind html -->
<div v-html="html">
</div>
<!-- Bind Text-->
$ W5 Z. ?. B2 V( b/ o$ Q, J; [+ h<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
9 m  W- i9 S( U/ T) c