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

admin

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

: U. Z9 R0 ~3 ]  }" o! Z（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可
# f: Y  u! Z% O  E' d; X4 T
（2）安装Vue 脚手架
0 l3 x- A3 |8 S$ F/ _>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目

vue init webpack vue-plmhome01


- Q- E* P. R2 D0 e! `2 H0 r(4) cd /d D:/webdev/vue-plmhome01
如果报错，再运行下 npm install
' a! d" _3 B7 Q7 c
npm run dev
0 b0 S2 O9 w8 Q- L
7 N5 _4 W  t( p/ t* D" `# B



还有一种简单的做法
4 ?. M; B- o4 D, S$ o
vue init webpack-simple vue-plmhome02

' b9 }! }% e- r) q5 F目录更精简些
1 f+ q' q0 p1 Y* x& S: a  _

admin

新版本安装

卸载老版本
6 x. h# y2 _+ K$ a0 `/ ?4 i- T
& y( f0 ~8 Y/ ynpm uninstall vue-cli -g
; E9 _. N% K. F, B- U. q
4 J3 n; l! k9 X4 d! z: Y! I+ F安装

6 a+ X7 c, s0 T& fnpm install -g @vue/cli   
5 I2 a7 O3 k( t& P$ o; X
: V; ~9 Q- p; o6 q
vue --version

# p1 `) _, D& }9 \! ]/ p# q
: ~- |! H& c! D7 r2 }' G* n+ svue create vue-plmhome02
& D/ w/ z+ d5 ~( Q* L) w
) J; c& J( z: H
! o6 _5 Z' p% f4 Fnpm run serve

; K9 k6 x( X! o$ U6 ?
$ Z( X2 J# \8 t$ ^) U


- o7 K9 X0 K6 T: y' i" I) C5 i- q

# F# {% y  K' t; \1 R
! S1 Q: N* {0 m& P) R! h9 g

admin

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

3 N; Q0 d# f3 _4 ]7 |

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

  \: |0 r& ~5 d0 T/ o- Q- [; X

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

<style>

2 Q# a/ f% p- [5 r

</style>

  Z  t7 _* Y  ^; l+ l: f

admin

数据绑定：
0 c% A" ?  h; g

<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
- V8 G3 C2 m8 o2 g4 d& i</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
/ ]( B$ a- d& L3 c, C<div v-html="html">
) _3 Z4 S  n' w9 u9 E" G7 j5 G1 h( j</div>
7 l9 z" G. W0 _6 v+ G<!-- Bind Text-->
, v  n& t1 J" ~* m  m' e0 c<div v-text="msg" v-bind:style="{color:'red'}"></div>
+ n, X0 S# @( s  F$ j* m/ y</div>

admin

数据绑定：


  ^. z% g/ \9 f1 e( v% s$ O0 r<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
9 M9 j+ e$ b6 I" t  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
& G, i' U9 S' X7 |. C5 F4 Y<!-- Bind html -->
6 w& H! O$ |# n- u3 t2 f9 y<div v-html="html">
1 ?0 X6 R( N$ j( K/ C' c* ]</div>
<!-- Bind Text-->
" W) j. P' D  R- D" h1 E/ X0 T<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：


8 k/ |' S% |& P9 p/ Y) y<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
! j0 X' \' E2 B- I4 c</div>
<img :src="srcurl" alt="plmhome logo">
" R. p8 ]& x! {* X  h- f<!-- Bind html -->
  R. r3 ?/ h& u& i3 Y+ Y, {<div v-html="html">
</div>
<!-- Bind Text-->
; z* q7 \5 |5 |& f<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：

1 ?, g' ~7 B" R) H
" X7 Q* @" q  p  X<!-- Bind Attributes -->
<br>
5 g! Q8 |" d: }<div v-bind:title="url">
" Q' p/ p0 C6 D  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
# s! k2 {- H; d6 n* B1 R! {% c</div>
# L, z( r5 R6 Q; Y, l0 _% Q<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
$ F0 _4 ~* m& f0 N3 r; N