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

admin

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

0 P0 w6 `' P. L6 X3 F（1） 安装Nodejs ，https://nodejs.org/en/  下载安装即可
! ?. f8 I$ U3 i1 ?
（2）安装Vue 脚手架
  k! H+ [' @; w0 ^3 I* r0 U( \1 H0 m>npm install --global vue-cli  / cnpm install --global vue-cli
(3) 创建项目
( S0 u! N8 p2 {. s
" |! B" I2 v% @2 O/ ~vue init webpack vue-plmhome01
! g" \3 `" X+ i0 P
7 g: G) c8 j7 q: U% L- {
( S; ~& q4 P8 j6 C/ F4 a9 k6 w(4) cd /d D:/webdev/vue-plmhome01
如果报错，再运行下 npm install
3 Q& \+ u0 [' ~& `. B# v
npm run dev

3 q- z1 G- W: @0 K


9 t4 ^: V2 B7 E2 z% Z
还有一种简单的做法
: Y# b4 D# W4 a: ?- v( E
vue init webpack-simple vue-plmhome02

目录更精简些

admin

新版本安装
4 |2 ^8 X1 ?5 v! T
! X" k4 W$ E, @$ D8 M7 u6 v7 [, l卸载老版本

npm uninstall vue-cli -g
4 `9 o, G# o( Z# j6 i) z
安装

npm install -g @vue/cli   

  ~; V& s7 q1 c0 {$ ^
3 V/ ^7 v& ~9 I( Dvue --version
5 F# u% d: E% p
" O, z4 C! a- |5 I3 Z6 s
. N% O# X0 `- y$ z+ ?/ a' pvue create vue-plmhome02


npm run serve

% w2 x1 G  w- M0 H) u


& G6 s5 W9 k9 i% ?, h8 n5 \4 F1 M6 C
9 H& r7 O8 b& L9 q# u( z) H
& Z  a* R/ b# ]( W% ]. m- g0 Q" x

admin

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

% U& q0 L8 c4 }& _/ C1 x! K# i

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

( C' c$ J# l3 b

  </div>

</template>

<script>

8 j7 |  b- c) U8 [* R

export default {

  data(){

    return {

      msg: "hello my first Vue",

      obj: {

        name: "Kimi",

        Age : 33

      },

      nameList: [

      { message: 'Foo' },

      { message: '33' }

      ]

    }

  }

}

</script>

<style>

</style>

admin

数据绑定：
" Z" p" B8 F4 l: {: G+ s9 A
) Q0 c5 n0 a! b/ _# C9 J
<!-- Bind Attributes -->
$ K5 F5 A" C$ \<br>
3 m. a) x: W. d# l5 ~( V7 _4 D<div v-bind:title="url">
  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
3 y8 c% \1 k- l5 f% N' Q<!-- Bind html -->
2 h8 }# K: S% s) p6 L& T6 q<div v-html="html">
3 E9 Y. r  o  ?1 y9 w0 `# m0 [</div>
6 E' m$ A* N* r& _, n<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
9 f, S3 D  B9 y0 m  U</div>

admin

数据绑定：

- G% Q3 p6 U# M6 b  L+ R# W- {
% r+ `5 u& k: X" ?+ K<!-- Bind Attributes -->
<br>
' N+ e7 O# _  y  |# [<div v-bind:title="url">
$ ~! J# s. a* \# U' p  "This is for the url bind"
</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
, T# X* ^% `& J$ N$ ~/ U+ {. Y: u( n<div v-html="html">
</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
9 ~) n: h8 J7 }; C</div>
1 p" \2 x! ^+ ~

admin

数据绑定：


<!-- Bind Attributes -->
$ V3 c$ x% ?8 N: J8 N7 i, q; k' H<br>
" K% d  Z# w# S) ]1 T9 F8 k& E& C3 J<div v-bind:title="url">
  "This is for the url bind"
3 X8 v3 v2 Z6 a2 B, t6 L</div>
<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
- D0 G1 U# p: W. m, G4 r<div v-html="html">
4 r8 [$ Z% q9 L</div>
<!-- Bind Text-->
<div v-text="msg" v-bind:style="{color:'red'}"></div>
4 ]* c4 k+ m1 t" W2 D</div>

admin

数据绑定：

% x" k$ `7 L5 s# E8 j# U
<!-- Bind Attributes -->
( y$ w- {/ r& j4 r  t<br>
8 H) U. q3 G( d4 O, n; ?; B4 a& Y/ m<div v-bind:title="url">
; u4 ?, _. N: T* c" Q* a% t  "This is for the url bind"
</div>
7 x5 n2 O# R. ^0 d3 `<img :src="srcurl" alt="plmhome logo">
<!-- Bind html -->
! L" D' Z# a4 q- X<div v-html="html">
</div>
<!-- Bind Text-->
2 f( z4 `! l( J5 [8 x<div v-text="msg" v-bind:style="{color:'red'}"></div>
</div>