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

admin

最近要使用Vue 来做互联网前端开发，慢慢把笔记记录下来吧
  d# g$ ^) T* r- Q- f
; S$ u# F  b, g& r8 d: A( |$ u& A: H（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

8 Z. B$ M, }/ X* Q: h# ?$ ]（2）安装Vue 脚手架
7 X2 u8 S( a2 _# {2 G>npm install --global vue-cli  / cnpm install --global vue-cli
) ?6 D# S: ?8 r4 T, E2 ~6 _(3) 创建项目
. D! I7 _7 J4 e2 T1 T+ w: a
vue init webpack vue-plmhome01


(4) cd /d D:/webdev/vue-plmhome01
* H" C# q. ^; e2 K8 M+ ?如果报错，再运行下 npm install

' t% _! O6 A/ |1 _( ^1 l3 ?npm run dev

/ P( L) W- }- C" u1 g



4 O  _4 j9 y4 b1 ^, `7 |还有一种简单的做法
6 j, e6 ?5 ~) l5 A
vue init webpack-simple vue-plmhome02

目录更精简些

admin

新版本安装

卸载老版本
+ r- E; [% v1 T; F1 v
npm uninstall vue-cli -g
0 G$ h0 ]- E8 K6 }  i. [( ?, G% P
2 `% T8 z  s* B1 b安装
; T( g/ H  Q/ w
npm install -g @vue/cli   
2 W5 @& G2 U' n

vue --version

8 X5 C7 t  T8 L5 t: i, D7 ]9 W- t
vue create vue-plmhome02
! q( Q' y3 B; F& B- R

) O4 e9 |% V& b* O: xnpm run serve
9 R4 R9 M, Q1 \2 m

5 J9 R4 Q: y  u# i. H
+ l% r- i: v: c- c- p1 F$ N; J* s4 z
! B5 x( u0 ?$ ], T+ t" T; n) ^; V

admin

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

  ~# g" p2 g1 d

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

  \  K9 i8 G6 f" X: d

  </div>

</template>

+ o2 i% i. |+ ^  y$ M

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

- s* S( E' F" m6 i$ @& \6 h

<style>

</style>

' X- {0 K4 [( x7 W

admin

数据绑定：
% h5 @2 K0 l% F$ `" h3 g" \, T

<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
" Y' q* Z; z$ a0 A& D7 L5 g

admin

数据绑定：


* u% M2 Z" L9 X. ?) O0 _5 r<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  b1 l; Z" N, W  "This is for the url bind"
. t7 i3 u! O- k9 e! A& o</div>
6 W" K  v# V  D& C. E<img :src="srcurl" alt="plmhome logo">
. o7 ?& t) I0 a: p- A4 Q: x<!-- Bind html -->
<div v-html="html">
</div>
<!-- Bind Text-->
- t3 L7 ]) C- |( ]0 O9 [<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
$ f) I3 h) x, Z0 j' a0 X) J7 q  R

admin

数据绑定：

/ w$ [, \6 Y) u/ v8 v+ A- ]/ j
) p! w$ y. j. C$ Z) {. G! |! p<!-- Bind Attributes -->
8 y( c2 X( m  l% P' E( F<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
0 w' n  |) V) q9 O<div v-html="html">
</div>
; O9 }% p! _5 u$ V+ _  X; n<!-- Bind Text-->
, V6 h. f; [8 O* w<div v-text="msg" v-bind:style="{color:'red'}"></div>
& ?! Y$ a  \: i& w9 E</div>

admin

数据绑定：

: D; |" g2 c2 n2 a; k
8 N2 _/ s* E1 M& ^3 v3 i<!-- Bind Attributes -->
0 o* p0 {$ \; o9 C5 G) Q) R<br>
<div v-bind:title="url">
8 u/ x" L- c& K  g+ L0 r  "This is for the url bind"
</div>
& f+ w1 n" u  @8 P, Z<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
$ [' ]5 m& V7 Z9 {9 x; y1 W<div v-html="html">
</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>
- Z  [+ U7 }# ~! g+ c- n