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

admin

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

0 y1 S$ P5 S! r+ O0 h1 w$ o（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可
7 g3 d# m; x9 M- }* U. I: Z* K5 x
2 u: x" m8 O, V' n) M（2）安装Vue 脚手架
$ l7 {; j3 Y4 F" z. w' [/ Q7 G>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目
9 N, Y, F- m5 G0 e7 I% @
vue init webpack vue-plmhome01
3 |- N& }1 K! f9 ^/ H
, ]7 D2 t7 O6 @" D4 ^9 z# t4 E
# J( `4 l8 _4 d4 v3 G0 Z0 O(4) cd /d D:/webdev/vue-plmhome01
% `! b$ G7 T% @. [- S7 x如果报错，再运行下 npm install

npm run dev

! w/ U$ _, b9 B* A. h: y- _# S# w9 i
9 z# W5 |; w% ~# L
2 y3 N  J1 ^% @. T# G. T+ X4 @
1 E3 A* D5 E. l) [: t, K- J- u
; y4 H# X5 e* |/ R' C还有一种简单的做法
/ ?5 c) m7 B  F5 B0 L
! U7 \$ i+ h: I) l8 O, O& wvue init webpack-simple vue-plmhome02
' M' A; e4 h3 S3 }0 u5 h2 c3 [' b
目录更精简些
2 r' R& f: I5 j$ I1 y( [1 \

admin

新版本安装
( O( n" T  u5 `. ^
卸载老版本

) [. b7 X$ K6 i2 D' F6 p8 _  y' fnpm uninstall vue-cli -g
5 U9 W) c1 J+ C2 A' W3 i; c! \
6 Y( s8 y3 Y+ R; B) j% h; p安装

npm install -g @vue/cli   

9 G( K- R9 u1 h0 h9 j% l+ n. d
vue --version
3 t0 Q; \, l4 l4 v! ~- N
! {) W  ]; ~$ S& N
vue create vue-plmhome02


npm run serve
0 v4 g5 v. B2 L$ w
2 B$ p* t+ v" Q; j7 H8 ^
, @% x: I, z. H$ T) @% s

' k" @5 ~" V: e$ c4 u. e

! Y4 ~4 P0 ]( I5 P6 }7 x' @9 @
" q1 d4 V% M2 q6 h7 r2 E: }
2 m. u. S: Q, x4 Q' S$ H1 b

admin

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

- [2 p5 U- \" A* }; }. K9 v2 T$ I6 B

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

9 E4 [- A$ p! X6 g

  </div>

</template>

2 y6 w3 v- ~, B9 `7 v3 m

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

<style>

</style>

0 v" i/ g( M& o( d& ~

admin

数据绑定：


<!-- Bind Attributes -->
<br>
$ p. U; e3 k6 Q9 E5 _* `2 n<div v-bind:title="url">
9 {/ ?' j+ V/ k  "This is for the url bind"
</div>
9 y9 G: Y/ W) H% O+ R<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
4 V% v" i; s2 U1 O</div>
# J, D8 X1 H: o% ]  h9 ^' P7 }8 ]<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
8 ]- ^1 |- o6 e2 G: J2 J7 R: l

admin

数据绑定：
4 f( Y9 b1 t, Z; H. a, |/ B

<!-- Bind Attributes -->
1 s$ T) ~! N+ o% X/ W# a<br>
$ R: ^' `$ u/ h/ w$ c* V1 b<div v-bind:title="url">
  "This is for the url bind"
# U+ ?3 Z/ |* K$ C) w</div>
" F0 U6 L/ B+ C. i. C<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
</div>
<!-- Bind Text-->
, L; S; D$ ~: R/ e8 l2 I<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：
% }' [/ W! q% Z( _1 v6 S5 C2 r
) N2 x' u, P8 i4 [( F( r7 I' j
! G& I  M2 f" ~4 f4 Z<!-- Bind Attributes -->
<br>
% O0 ?4 v. [+ d( m. N% S<div v-bind:title="url">
  "This is for the url bind"
5 C$ ?  p: ?- j8 O$ }# V: U' Y</div>
<img :src="srcurl" alt="plmhome logo">
' R3 ~" Z, d$ z<!-- Bind html -->
& D! p, J/ D: m0 @" U/ y& c$ V) c<div v-html="html">
</div>
, v! X# D% `8 v" D" @8 l<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
) _7 S, d, t' e3 m</div>
" S2 k1 M9 ^0 @

admin

数据绑定：
0 u- m9 V  v6 f; M) a

<!-- Bind Attributes -->
7 d6 I; x6 ~! E4 X8 t0 K/ z<br>
$ W# l$ Y# T# ?+ g$ C0 d<div v-bind:title="url">
4 a4 R; ~% q% S. U  "This is for the url bind"
</div>
, k9 v) \9 ?5 N: V1 B5 O+ f. V0 J<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>
, A& q& K" D% a9 f( ~" G3 Z</div>