vue.js 入門

簡單一句話來描述：vue.js是一個前端框架。

官方文檔：https://cn.vuejs.org/v2/guide/index.html

雖然，我之前也會改一些前端樣式，但主要是基於HTML和CSS，HTML主要控制頁面的結構，CSS主要來控制樣式。涉及到JavaScript就比較小白了。

我花了一個下午照着官方文檔作練習，固然是隻建立一個xxx_demo.html文件，在<script></script> 標籤對之間寫 Vue.js語法。這不算錯，但在工程化的今天，這麼學得猴年馬月啊！徹底不是一個老司機的姿式。

 

Vue項目構建 

一、安裝node.js

官方網站：https://nodejs.org/en/

下載和安裝過程我這裏就省略了。

二、安裝全局的vue

D:\js
λ npm install -g vue-cli

注：

（1）我全程是在cmder工具下操做，這是Windows命令提示符（cmd）的加強版。

（2）npm 是node.js的一個包管理工具，當你安裝好node.js後，就能夠在任意位置下使用npm命令了。

 

三、輸入「vue」命令檢查是否安裝成功

λ vue Usage: vue <command> [options] Options: -V, --version output the version number -h, --help output usage information Commands: init generate a new project from a template list list available official templates build prototype a new project help [cmd] display help for [cmd]

 

四、經過 webpack建立vue項目

λ vue init webpack my-project ? Project name my-project ? Project description this is my first vue project ? Author huzhiheng <fnngj@126.com> ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? No ? Setup unit tests with Karma + Mocha? No ? Setup e2e tests with Nightwatch? No vue-cli · Generated "my-project". To get started: cd my-project npm install npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack

webpack是一款模塊加載器兼打包工具，你只要知道經過webpack能夠建立一個工程化的vue.js項目就能夠了。

在建立vue.js項目的過程當中，須要根據提示選擇yes/no。參考我上面的選擇就能夠了。

 

五、 安裝依賴

D:\js
λ cd  my-project\
D:\js\my-project
λ npm install

想知道你的項目都依賴了哪些模塊，能夠查看my-project/目錄下的package.json文件。

 

六、 啓動vue服務

D:\js\my-project
λ npm run dev
...
> Listening at http://localhost:8080

 

默認會佔用本機的8080端口號，而且會使用默認的瀏覽器打開：

 

 

Vue項目架構

 從一個.vue文件到頁面：

vue.js的一個組件：

 vue.js簡單代碼分：

打開my-project/src/components/Hello.vue文件。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script> export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App', } } } </script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> h1, h2 { font-weight: normal;
} ul { list-style-type: none; padding: 0;
} li { display: inline-block; margin: 0 10px;
} a { color: #42b983;
}
</style>

 這裏的實例代碼現象好符合上面那張圖，一個vue.js文件由HTML、JavaScript和CSS三部分組成。

 

Hello Vue! 

接下來添添加一條「'Hello Vue!」

Hello.vue文件中找到HTML部分添加：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ message }}</h1>
<h2>Essential Links</h2> ……

 找到Script部分，添加：

<script> export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App',  message: 'Hello vue.js !' } } } </script>

 查看頁面：