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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
+ H+ v- i3 a7 |& m( z- L6 H
! L& e5 k* `2 \$ ?（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可
5 g, x2 b* n) f) r- o3 ^4 S
（2）安装Vue 脚手架
- j1 o5 ?+ B& m$ x>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目

vue init webpack vue-plmhome01


(4) cd /d D:/webdev/vue-plmhome01
" r( r1 r( m* e8 t, P0 t6 [9 E1 A如果报错，再运行下 npm install
* _) X7 @' M, Z6 l1 g) l* m
npm run dev
6 i, V0 D+ _' B) r

8 C+ P0 H. R4 i, a


! y- G* H0 r3 A. k. c6 U/ n7 J还有一种简单的做法

4 S* F7 O6 t$ s$ _vue init webpack-simple vue-plmhome02
: \6 Q: Q* ]6 A4 w6 n/ `6 K# P
目录更精简些

admin

新版本安装

卸载老版本

npm uninstall vue-cli -g

+ B# ]8 j% `* L1 ^# v安装

/ c! x- S) M. `, Y7 |: e& ]/ {npm install -g @vue/cli   
" C- i' T" y, L! {5 U4 q( x

vue --version
, y2 s6 O, b- {3 X
+ g: h2 ^1 x6 t8 h0 v
. t/ O2 X) m5 Y! S% |" V- Bvue create vue-plmhome02
% F# H# u: Z+ M

5 Q$ x) x4 n) A, ?- `9 {npm run serve




3 o0 n( [/ n. Z% c2 o& m4 e
4 I* g5 D  q4 c' q: I$ ^4 y2 E, _

% c8 ^' [  g! f; y- M1 k/ u

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>

! f7 {/ _  S8 w  `& f$ w+ n( \

  </div>

</template>

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

- N# `; T- j6 I$ ~; j$ e8 {/ b

<style>

  m$ E; H% a$ N' I( @3 A

</style>

) b0 c2 U1 q' {9 P5 q$ {& k

admin

数据绑定：


<!-- Bind Attributes -->
# e$ k2 l# n0 G$ Z8 c9 ~' D. m<br>
<div v-bind:title="url">
( p# |) K( h' a3 G  V' @" L, O  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
6 Y. V0 r8 W2 h6 a' Z) I/ n<div v-html="html">
7 D: d7 g6 K9 B% E2 q2 [1 U" z8 \</div>
$ A  f  J  d1 G1 ~3 D( K0 C' |& n<!-- Bind Text-->
$ z6 U- I/ `, n<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
7 ?9 [) y; |# Y0 O1 O, T! A. v8 n7 A

admin

数据绑定：
6 w) i  G3 @! z, c

<!-- Bind Attributes -->
& ^  u  ~+ D$ s5 O( b1 {<br>
<div v-bind:title="url">
  "This is for the url bind"
. H- H* g) j6 e" k0 B" y$ ^, l5 ^</div>
# U: M2 @' y' K) a# s1 R' d<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
# J0 g# H' }- y0 i<div v-html="html">
</div>
9 y# J3 I; x3 t4 r+ I7 ?<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
8 r( a8 x! ~4 ~7 A! `1 C

admin

数据绑定：


<!-- Bind Attributes -->
2 k. q( i9 c$ s9 C1 N% z<br>
<div v-bind:title="url">
! B, W0 x: M# }3 D/ T  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
* f2 v: X6 D7 r. o' v1 d' A% }<div v-html="html">
</div>
<!-- Bind Text-->
9 h3 L* J  v4 C8 V0 b( P2 H. R# M% @6 \<div v-text="msg" v-bind:style="{color:'red'}"></div>
% A& E. [! {; ^7 z1 F9 K( O</div>

admin

数据绑定：


* F" H9 D0 p. b5 o* S1 g% U<!-- Bind Attributes -->
2 [0 a6 [& h. J% E6 m3 h0 W<br>
( M9 E: e: Y5 L" X* G- Q. z<div v-bind:title="url">
  "This is for the url bind"
: @4 {" Y# v+ u4 P2 Z</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
/ o" A' J3 I+ d' r8 e0 I" C4 `( }<div v-html="html">
</div>
<!-- Bind Text-->
4 i7 K+ z  M9 Z% R* w2 o% a& E7 n<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
7 U/ }; i3 e& m) J+ ~6 v0 x* b4 L