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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
4 d; Z2 p4 K9 e( ^
（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

（2）安装Vue 脚手架
; U: U# V9 I- P6 b4 `>npm install --global vue-cli  / cnpm install --global vue-cli
' B5 z7 G! ?+ J# D(3) 创建项目
9 k) F2 ~& w0 a3 P2 R3 N% V6 J
! @" l+ M5 G4 q/ l! A' {8 x* Avue init webpack vue-plmhome01

: X& t4 L. m" @) a" L$ `* {2 _+ Z
(4) cd /d D:/webdev/vue-plmhome01
如果报错，再运行下 npm install

npm run dev

, E5 v1 M  O/ f4 ^3 y. _

8 k: s' G, `' ~% e8 x* ]+ x7 k. R

; x/ s: B' z, d* g- q还有一种简单的做法
* w3 v# G2 G: y$ I
" O3 \2 k6 l/ F: q6 h4 ~% n* Jvue init webpack-simple vue-plmhome02
6 o7 s: u# c5 T6 A# g
目录更精简些
2 D  \' ~. ?% O9 A6 b# ~, n

admin

新版本安装

卸载老版本

npm uninstall vue-cli -g
( V0 |* ^- b+ E& B) ^% I
安装

npm install -g @vue/cli   
# l" b- [4 R- d8 C- J) d  L

; _) D* c" ]0 N) B9 I, ]vue --version


2 s: j! e0 Z" \6 p# Q2 I, p, zvue create vue-plmhome02
, W8 |8 n) G) B- h7 y0 D  q

% M- t+ Y: m) ~5 unpm run serve

+ H! t6 l" p" Y

& v; m. t/ p- s7 ~$ @! Z

0 j8 i! p+ o  t. {3 a

admin

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

! ~" X. S2 O4 V+ w9 w

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

# P$ w8 J: k+ O' P4 b

  </div>

</template>

5 L' H, A3 j/ F: e( J7 e- P0 |: M

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

& U7 T+ R/ c# `8 X) `3 W, d

<style>

' F  o9 x0 |4 F7 w

</style>

admin

数据绑定：
( d- u0 z/ l' s' F0 \" d

/ E7 F, L  N- G' M9 E2 {9 F<!-- Bind Attributes -->
- {( T" M+ U; n$ H<br>
<div v-bind:title="url">
  "This is for the url bind"
8 I0 D0 c- ^5 {</div>
: }  f6 d5 s5 X6 z<img :src="srcurl" alt="plmhome logo">
' ^; o5 m5 s2 {$ m% g  J( t<!-- Bind html -->
<div v-html="html">
</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
/ m, t' O" v$ T" Q9 l" {# {) j+ v

admin

数据绑定：
1 j% `4 A7 j; V$ y1 B

<!-- Bind Attributes -->
! Z- {# C$ X& Z# T  h<br>
<div v-bind:title="url">
  "This is for the url bind"
5 d2 V9 k& g$ `2 B7 `6 F</div>
<img :src="srcurl" alt="plmhome logo">
: L5 h' |: K* G) |( T2 v7 i<!-- Bind html -->
8 A' c: Y' y5 q/ B9 ^. \<div v-html="html">
</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
2 D- W' [8 N& X# l" \; m

admin

数据绑定：

9 T; a" E6 u2 V# ~4 J3 [
7 O' b- x. L5 I! k+ J<!-- Bind Attributes -->
+ g2 X4 g2 M5 F( p<br>
<div v-bind:title="url">
  "This is for the url bind"
% g7 K& o7 K  L& L+ S- C# b: k- Y</div>
/ @' G2 z+ a. m' P9 s% L: ^<img :src="srcurl" alt="plmhome logo">
; O( J( [2 B- @( u- g' f( x<!-- Bind html -->
<div v-html="html">
. c+ `2 @. X/ B) w</div>
' ?2 k! k$ F: D& X3 ?* `<!-- Bind Text-->
, K5 {8 @8 ~. x6 _<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：

: B, g% b: l1 L2 B; x
! e' e, e/ K( f) w" T<!-- Bind Attributes -->
<br>
0 b1 Z4 O+ g# `' d: l# R<div v-bind:title="url">
1 F% S# `+ U/ ]0 P; z/ j; C  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
. x9 _+ X$ s; [</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
. ~3 h- W2 Y5 f# t