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

admin

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

（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可

（2）安装Vue 脚手架
. |) F8 [1 q+ q2 I7 R>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目

vue init webpack vue-plmhome01
! v. L8 P5 a9 C4 z; g( [4 E  s& _
- a. [( g% Z/ a; b* _0 w
* V4 z( V9 Z7 n(4) cd /d D:/webdev/vue-plmhome01
3 ?! Q4 v" Z9 U$ E如果报错，再运行下 npm install
+ o/ }) _# w1 _! f' X3 z
npm run dev
* H6 r9 w# F0 E4 F7 r! x* D% w
2 b' K/ b% C; }, O) M' K& L
4 E0 g" G; P& ^% G9 H$ f* A
/ U0 y* z9 H& f% e$ o
- t7 F8 L+ w9 U# j2 C+ n
- _/ T& Z; R7 {2 g9 E& K7 _还有一种简单的做法
) B+ v: g( Y4 F# P
$ x& {$ B3 \( q5 uvue init webpack-simple vue-plmhome02
, A& H/ k# _" V2 _5 u8 j$ A4 M
! ?8 Q! R5 V% S& E: g& H目录更精简些

admin

新版本安装

卸载老版本
/ o9 s0 \" J+ f& [4 |0 H' I% }: X7 d
npm uninstall vue-cli -g
  ~: `9 t: A0 x6 h7 ^: K4 \
6 R. J- f1 T% T3 J5 B6 \安装

npm install -g @vue/cli   


vue --version
( L8 w8 R$ j+ I0 `' {

* x, L; ^7 a/ @% _) ~$ ?vue create vue-plmhome02
$ R  ?. o6 f* _# n3 l3 s8 }) D
& Y9 S7 a( \* c) f# x" ^/ S
npm run serve
1 K3 N* ^: ?: o; ~: r- ~


! N5 Z8 s0 z. \/ H$ y7 f

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>

; N( X5 w5 V* O! L

  </div>

</template>

. z; D- c' V; A0 \  E1 D

<script>

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

9 {6 z$ k1 T$ H7 j

<style>

4 _: Y* J2 R2 F9 Y  c% ?" W

</style>

2 p# {. a% `; W

admin

数据绑定：


<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
2 |4 D! e7 u. a' D' d0 W</div>
* J* u4 ?/ }) ~, M5 E& C) I<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
</div>
: q) |3 p9 v* o9 T: B& a- \<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
2 `8 M& A  U4 P% R  i4 L1 c- b, @</div>

admin

数据绑定：

* a/ S! T/ g% K5 G- N* u
<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
$ H. Z* |8 J# B2 y  "This is for the url bind"
</div>
* |7 y  [  E# @# n. b$ A<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
<div v-html="html">
) X; V% x2 d$ \# H+ B' U/ G; {2 a</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
# _& q8 Q, r- T* b2 s5 V</div>
" W6 F. m( l! P

admin

数据绑定：
5 y) U* E7 O( m! H) O* w" D

<!-- Bind Attributes -->
* k( |* G6 m9 I<br>
<div v-bind:title="url">
  "This is for the url bind"
0 v" s7 L  A  D</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>
( ?! }/ y# F+ H( Y: c% X</div>
% h% j" {. T: ?9 F

admin

数据绑定：
% ]. k% ]) n0 S( D6 @# `. H3 h

<!-- Bind Attributes -->
<br>
<div v-bind:title="url">
  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
' U2 D" P6 ~2 B' M7 [6 E  t  D<div v-html="html">
& z- J; q) U; J: B9 S# f5 q</div>
, d3 n; ^& Y. x& ~<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
/ W0 M# q2 j+ E</div>
' `3 ^' c0 L! U4 A! E+ ]+ J- e! X