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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
- s4 f, `' X( I* x  v; y1 j9 o7 c9 o" Y
（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可
3 \, a- [# Y& s% A* [+ U9 i
（2）安装Vue 脚手架
>npm install --global vue-cli  / cnpm install --global vue-cli
* z2 O/ S0 U) T9 k(3) 创建项目

1 ~# ~1 }% @$ c- Q  m! i% O! H) Pvue init webpack vue-plmhome01
) k! A* O2 G  v+ R4 F2 Z0 f* ]' S$ K
8 i0 B/ |1 Y$ r1 u+ d$ y
(4) cd /d D:/webdev/vue-plmhome01
如果报错，再运行下 npm install

9 R# c, k# V/ q% D" enpm run dev
6 h4 {8 Y4 G9 b" t
# A9 b# e: {5 T, f0 Y
' W( {2 l# T$ [* w' [
  M1 L& Z6 g' k- `7 O

还有一种简单的做法

vue init webpack-simple vue-plmhome02

/ d4 U/ r: u' b: h目录更精简些

admin

新版本安装
$ h& j, U; A! v* z# ~2 X
卸载老版本
  f2 M7 G3 r+ {9 a; m
npm uninstall vue-cli -g

安装

npm install -g @vue/cli   
/ D3 v: V) H2 e# i2 v- ?

vue --version

+ I9 I: l7 H9 v4 u5 Q2 @9 O1 ?
vue create vue-plmhome02

3 w5 W% k' v# e. p! s
* |" y2 B1 d" Cnpm run serve
! p% z; H# U/ Y' Y4 F
# m' l( h0 P1 b! x& x) X- M2 c

$ h/ E: P4 s. E% ^8 D$ @
1 u" `  I4 m& f

0 E  [% P7 W/ U3 k

& D, Q4 V+ O0 L6 K) \

admin

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

" u$ O$ [& v+ @8 c& c: ~

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

1 t/ t# x' l  s& A

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

<style>

+ n3 d/ B! ^; v. j0 y

</style>

admin

数据绑定：
, y2 p8 J/ l. E' b( a/ d
- X* Q# Z/ Z) X! ^
<!-- Bind Attributes -->
1 V$ @: C9 B0 h) Z9 Z; |6 r<br>
<div v-bind:title="url">
  Y0 T; s% c" p1 I% D  "This is for the url bind"
, m' h% T5 _; I9 D" |0 e* H</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
- C' a( Z5 L) i" ^4 @: x</div>
3 E# ]7 n8 b0 U<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
7 g& d  W9 Z5 t- x' _: X</div>

admin

数据绑定：


# Q: x. v% X' n& X<!-- Bind Attributes -->
; ~6 v, ?5 [* `4 D<br>
# b: u/ @1 V. D0 R<div v-bind:title="url">
  "This is for the url bind"
</div>
/ S6 d8 z" I4 _, X<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
0 D6 k* J) w9 ^<div v-html="html">
</div>
<!-- Bind Text-->
0 e9 _% x; x. N" g$ G. a, q<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>

admin

数据绑定：


<!-- Bind Attributes -->
0 \6 M9 B/ B+ z, E( A<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
. i* ], P. O! b4 ~" l9 S6 B9 P<img :src="srcurl" alt="plmhome logo">
% s" D' V% N. |) Q% h. l7 y0 r<!-- Bind html -->
0 }) c- X4 H* Y2 B: X! q<div v-html="html">
</div>
1 }8 y6 Q' x5 g1 S5 ]<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
2 R3 [5 L( T! K4 J& j</div>

admin

数据绑定：


+ j8 O6 E' g5 v<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
' o# l& n. [0 E</div>
1 T5 i, m! M% o9 r; u<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
0 j; ^1 }0 c6 b) ]0 Y: x/ i% j  `</div>
<!-- Bind Text-->
  ^' M: o4 g/ q# j2 p: j+ Z<div v-text="msg" v-bind:style="{color:'red'}"></div>
' u# v( C9 _4 S$ G</div>
3 u/ Z/ w+ V. b6 i