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

admin

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

, G6 y( g9 e. P) ?* W（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可
* g0 P$ V. o5 d
+ v4 C5 P3 {& w. e& k（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目
* F- g9 W, z# ~1 }: q
vue init webpack vue-plmhome01


* e- I( m9 I& @7 h9 x( o& m(4) cd /d D:/webdev/vue-plmhome01
$ r% Z- V. G2 B1 K* @- f+ s如果报错，再运行下 npm install
; a; e1 X# J6 [( P
* i- D# }# V. m7 Jnpm run dev


. B1 }% b+ k* w' O3 C5 Y2 |
5 E, m' e6 w: a& S+ `
4 S" H; |. A9 X) a
0 z2 h# N& @$ W5 F6 S还有一种简单的做法

vue init webpack-simple vue-plmhome02

目录更精简些

admin

新版本安装

卸载老版本
( A* e, J6 S- p$ `) M4 P, E
8 k" q* Y* d: F+ ^' pnpm uninstall vue-cli -g

安装

5 D9 _7 t! X  N# h4 Hnpm install -g @vue/cli   

6 ?# A8 {* Z% o& L) T4 ~2 P3 K# B
vue --version

3 u5 h: k/ f$ z# w$ [2 F+ R9 O
; G7 w. B( O: ~vue create vue-plmhome02

# g: p9 \  a# ^2 H5 b
npm run serve



) q/ D' h- b% `
% e% s/ _+ R4 ]3 e: r( F
9 B5 f5 R! q( H7 H
0 w0 W: y  o" e+ g) b

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>

8 @7 G3 E9 b, s0 d

  </div>

</template>

<script>

# X0 {1 b& t1 g8 b" h/ Q

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

7 ^$ k1 T# M* c

<style>

</style>

! L6 c5 g4 F  ?% H8 L

admin

数据绑定：
4 c/ r9 V5 @0 X1 i6 i1 L

9 `% V: u/ y4 a4 K0 Y<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
% M# Y8 k( `( L' T. V2 O& i6 A<img :src="srcurl" alt="plmhome logo">
" Z& G! S' O/ I" q<!-- Bind html -->
% A& \/ B! G5 a( O: w% C<div v-html="html">
2 s& q+ \5 E5 {' y5 K</div>
<!-- Bind Text-->
6 Q6 t7 |8 C- T6 U) u/ G<div v-text="msg" v-bind:style="{color:'red'}"></div>
# x+ d8 ~2 V1 f/ `# u! C</div>

admin

数据绑定：
# d8 [9 |' }0 `% C9 p4 ?! ]% I
2 z; i/ d) |, Q, K2 W7 K* E
4 o5 v& H2 ~2 N<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
0 n1 S% e2 C  V/ B6 m4 @5 |% p5 g/ d% u  "This is for the url bind"
</div>
/ B3 P! Y7 T5 z, P. s& ]% \<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
8 ?2 V& a* l1 ^<div v-html="html">
</div>
<!-- Bind Text-->
) J% o) K- z4 q/ ^" ?<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
. r, K8 f% ]1 g# _6 J4 W

admin

数据绑定：


- p0 d! x9 d; \<!-- Bind Attributes -->
! G/ d$ q" w" q2 T; q# s<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
- ~0 @. Z. p# r6 C3 `; c<div v-html="html">
, ]* W- R' H# V4 O8 j9 Z& H</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：


<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
, ?9 u8 |' Z$ _3 q% M, k5 q</div>
0 q1 g! R9 G$ Q1 \<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
  L: r1 ?+ V' h0 l+ M0 Y</div>
4 \$ O1 H! b3 ^0 e% u<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>