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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
# o' m# J% t% E
  l7 W- n9 p% y7 M' H0 N/ A# l" ]4 t（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目

9 O$ e0 Y5 G+ Q  \5 ^- i* B, Kvue init webpack vue-plmhome01

7 c+ W) `( p7 |2 O
(4) cd /d D:/webdev/vue-plmhome01
/ d( N5 W' }4 ?" l如果报错，再运行下 npm install

  ^2 s5 C' j' K, q' k) inpm run dev
# |+ m" J8 K6 y3 N: o
" w/ n, C- `" S, O- v
$ k9 e: A5 u" R' h5 k
9 N# r# ?$ m1 t

3 S3 B$ b* z1 t% p# f& t, q+ |还有一种简单的做法

. x( Q: p5 f& u+ T2 a' B. Uvue init webpack-simple vue-plmhome02
& h" t0 `/ f$ v
$ t( q; y& G# W  E" O4 M) F目录更精简些
8 d* |0 ^/ C2 Q. D7 j

admin

新版本安装
; y7 @& V7 O0 o& e4 H
卸载老版本

* G. g& E" I6 }) Q) F& [npm uninstall vue-cli -g
4 i% o5 a5 |1 x2 T9 W, h4 ~6 y3 I0 x8 F
安装
9 J  _0 s7 a* U2 m9 f9 X. s2 l
npm install -g @vue/cli   
; d/ C6 n, Z+ \4 R0 x$ I0 t
. f+ R% V' }9 Q# J+ [% b
9 ~7 s1 V; ~) m# `# K/ C. _( n6 @vue --version


! a# z* w' p% e/ l, y3 @+ Ovue create vue-plmhome02
" w) H! W' M; F1 g* |7 r, v4 Z" Z

npm run serve



, O: ?6 m' ^' A

2 l4 M! `  y! Y

) ]% U* I0 {: x3 g3 P6 G. t5 K/ V

admin

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

8 E7 ?5 q+ U: k0 p8 `- {$ ^7 U

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

" @% u/ T0 G2 Y

<script>

& A6 M3 ~$ d( e. b0 Q

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

<style>

</style>

admin

数据绑定：
6 V! y+ {4 X3 c  |5 c

<!-- Bind Attributes -->
<br>
% q% d8 m4 q  l% x% o! }<div v-bind:title="url">
; D: @, |+ ~" i9 K  "This is for the url bind"
" T6 S6 M  ~+ `* e7 q</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
* B, I# T* y9 p4 S* L<div v-html="html">
</div>
' p& _7 V5 V8 a. _<!-- Bind Text-->
  g6 O! X' ?  N<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：

; H/ P. s7 M4 e( S& H/ H
<!-- Bind Attributes -->
, x3 z6 q5 l# f, e7 q/ v  u! N<br>
, j" A) K4 }0 N<div v-bind:title="url">
  "This is for the url bind"
</div>
/ J6 m+ I" N6 f: I8 L# M<img :src="srcurl" alt="plmhome logo">
2 s3 U' N, [: k- N9 L<!-- Bind html -->
<div v-html="html">
</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
; n% U: V7 D$ B. j/ V

admin

数据绑定：

& ]! I! ^! V5 |" i" o: x
<!-- Bind Attributes -->
$ r* a4 e7 e2 O; [! e, k<br>
! ~. S6 O: |$ z# ~+ v# d; P<div v-bind:title="url">
  "This is for the url bind"
% c; c. C/ C$ ]! Z" `4 t2 b</div>
, s5 ?$ P' T# o9 G+ a; r+ O<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
</div>
  M4 c) R$ S! H, `- T<!-- Bind Text-->
8 S. R( i+ P4 E5 D$ @9 Q! v" \<div v-text="msg" v-bind:style="{color:'red'}"></div>
6 J1 r. I4 n# S0 z+ b8 m- U7 P</div>

admin

数据绑定：


<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
1 `* W) e$ j- o  "This is for the url bind"
1 _9 v5 L- O: D; t. ~9 N" \2 k</div>
" F/ q" A6 S4 n1 C6 ^' Z<img :src="srcurl" alt="plmhome logo">
* w7 K  W7 K' U<!-- Bind html -->
) Q- A3 Q; t1 F# F3 a# ^1 i$ t<div v-html="html">
  o1 G3 i3 c& o2 G4 z( @: S</div>
5 ]' ^# X  R  A, {" R& o8 q" ~<!-- Bind Text-->
% s6 U4 a( C7 Y( v5 b; _<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
" T0 s$ K/ h  s