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項目構建 

1、安裝node.js

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

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

2、安裝全局的vue

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

注：

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

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

 

3、輸入“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]

 

4、通過 webpack創建vue項目

λ vue init webpack my-project ? Project name my-project ? Project description this is my first vue project ? Author huzhiheng <[e-mail]> ? 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。參考我上面的選擇就可以了。

 

5、 安裝依賴

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

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

 

6、 啟動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>

 查看頁面：