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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
; p2 v1 A4 A0 z) y; K
2 C% u& n6 U  T$ }2 w( ~  y7 f（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可
2 _! v5 H. N5 O& e  I( S3 D9 ]+ \0 g
（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
) c$ a2 T$ ?$ |! N" \" p" v/ U- h: g% S(3) 创建项目
4 o$ E  r* c3 X  w1 B% i( ?0 K4 e
vue init webpack vue-plmhome01
" l8 M' D6 ^: G( C/ ^2 i
8 Q4 i/ N/ I$ ~# Z; r' }, Y
(4) cd /d D:/webdev/vue-plmhome01
如果报错，再运行下 npm install
! o0 y) v: f; W; H3 a1 i) C
' V, [$ i: }% N) K  u5 @( ^npm run dev
- H* @7 u( h$ a0 |; h1 C3 w

2 w, k* N# M4 y6 o6 [9 p
! l  L" d9 h( Q

& x: [) |$ L  |; f6 ?" ^1 _还有一种简单的做法

vue init webpack-simple vue-plmhome02

目录更精简些

admin

新版本安装
4 d4 e* b/ s5 h2 B) Z* Z" D3 _& t9 D: l6 t
" E" |5 A( P' Y* l卸载老版本
  S; L2 o0 k6 e% C( k
npm uninstall vue-cli -g

) u; F# a2 t4 Q6 U安装
2 w) E: I$ I! |$ ~9 Q- n
. i& Z& w3 h3 O0 X. U7 r. X% {npm install -g @vue/cli   


* y1 p) b, t; F) Tvue --version
! Y% R% W/ ~2 V1 g) @
. _- J" f" i5 H
vue create vue-plmhome02


npm run serve
$ ]/ X3 q3 @5 w  M( r! g
" @% ]3 v! c2 c- @

8 R" X( E! v; L


# }8 l! F5 G, _( a* I& g: Q) ~

. C. J4 j7 y6 E

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>

- c# K# ~# n4 F" f) A1 A  r

  </div>

</template>

3 r: S5 I, A  f

<script>

8 O( ~! P5 Y, m

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

<style>

; C4 o( l% v. g$ K+ [

</style>

, N% N- _+ _. ?+ A* C9 v

admin

数据绑定：
, C% [! ]; h( v

<!-- Bind Attributes -->
<br>
  _) b7 I) j7 R- X/ K+ Y9 X<div v-bind:title="url">
2 {6 o. G! z) t( S  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
</div>
  f' F7 i& I, @5 l% x6 m<!-- Bind Text-->
% E. L2 x. F1 m# ?+ J' A<div v-text="msg" v-bind:style="{color:'red'}"></div>
0 ?0 p: B% _- @8 y$ Y  t' }</div>
! c5 J. P  K( s& ~

admin

数据绑定：
4 K& L! {" l! K/ W3 o# I  M+ }8 I

<!-- Bind Attributes -->
<br>
7 t/ m: f# ~, H4 L2 t9 I<div v-bind:title="url">
( @4 s+ V! K3 \/ r  l* O& `0 ?  "This is for the url bind"
</div>
' h. G( W) z( e6 `- _4 c$ x) U# D<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
, |: Z: E& ]8 ]. F<div v-html="html">
</div>
<!-- Bind Text-->
  S; x2 _4 s) V# b* Y$ z( l<div v-text="msg" v-bind:style="{color:'red'}"></div>
" r9 A" H3 b8 \- m7 {- c; b8 C</div>

admin

数据绑定：
1 H& C5 l2 t8 S
: M' L) U& q* j; @9 A+ Q& q9 l, I
<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
; i  C* E$ t0 B7 p& w  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
& i6 u- @4 k( k7 x1 K<!-- Bind html -->
<div v-html="html">
</div>
5 p- i: H& s4 k4 L$ P- t1 H5 w<!-- Bind Text-->
) S8 q# W. E. I3 }/ U  A<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
4 a8 s2 w8 i+ {( E1 Z) ~, W, R

admin

数据绑定：
4 R) Z! E, i1 S2 T6 Y

4 I: Z' l) n3 |4 h- M  x" O, r) [. j<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
/ X# v" l( ~8 m$ V, Q<!-- Bind html -->
<div v-html="html">
. r% e9 z- {' `9 [+ r</div>
7 G, \5 w0 a9 L<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>