vue搭建腳手架

時間 2019-11-17

標籤 vue 搭建腳手架简体版

原文原文鏈接

Vue.js

Vue.js（讀音 /vjuː/, 相似於view）是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，Vue 徹底有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。
　　Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。
　　Vue.js 自身不是一個全能框架——它只聚焦於視圖層。所以它很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，在與相關工具和支持庫一塊兒使用時，Vue.js 也能完美地驅動複雜的單頁應用。css

今天來簡單介紹下使用vue搭建腳手架：

安裝Vue.js

（1）獨立安裝

　　在 Vue.js 的官網上直接下載 vue.min.js 並用 <script> 標籤引入。

（2）使用CDN方法

　　如下推薦國外比較穩定的兩個 CDN，國內還沒發現哪一家比較好，目前仍是建議下載到本地。

　　BootCDN（國內） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js
　　unpkg：https://unpkg.com/vue/dist/vue.js, 會保持和 npm 發佈的最新的版本一致。
　　cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.jshtml

　　使用<script> 直接引入這個地址便可使用vue

（3）NPM方法webpack

　　Vue.js 提供一個官方命令行工具，可用於快速搭建大型單頁應用。git

 1 # 全局安裝 vue-cli
 2 $ cnpm install --global vue-cli
 3 # 建立一個基於 webpack 模板的新項目
 4 $ vue init webpack my-project
 5 # 這裏須要進行一些配置，默認回車便可
 6 This will install Vue 2.x version of the template.
 7 
 8 For Vue 1.x use: vue init webpack#1.0 my-project
 9 
10 ? Project name my-project
11 ? Project description A Vue.js project
12 ? Author runoob <test@runoob.com>
13 ? Vue build standalone
14 ? Use ESLint to lint your code? Yes
15 ? Pick an ESLint preset Standard
16 ? Setup unit tests with Karma + Mocha? Yes
17 ? Setup e2e tests with Nightwatch? Yes
18 
19    vue-cli · Generated "my-project".
20 
21    To get started:
22    
23      cd my-project
24      npm install
25      npm run dev
26    
27    Documentation can be found at https://vuejs-templates.github.io/webpack

進入項目，安裝並運行：github

1 $ cd my-project
2 $ cnpm install 3 $ cnpm run dev 4  DONE  Compiled successfully in 4388ms
5 
6 > Listening at http://localhost:8080

這樣就生成了一個新項目，而後咱們看一項目結構：web

而後看一下幾個主要文件的內容：ajax

　　index.html文件vue-cli

1 <html>
2   <head>
3     <mate chaiset="utf-8">
4     <title>vue-playlist</title>
5   </head>
6   <body>
7     <div id="app"></div>
8   </body>
9 </html>

　　main.js文件npm

 1 improt Vue from 'vue'       //能夠將腳手架中下載的模塊拿出來，能夠直接使用new來實例化vue對象
 2 improt App from './App'     
 3 
 4 Vue.config.productionTip = false
 5 
 6 new Vue({
 7    el:'#app',              //當前的vue要控制的容器是誰，要獲取的這個容器元素是誰，#app是index.thml裏的id=「app」
 8    template:'<App/>',      //模板，能夠寫對應的div，也能夠寫組件調用的標籤，只要有一個根標籤便可
 9    components:{ App }      //想要調用組件，必須在component裏註冊這個組件，這裏的APP來源於引入的./App文件，即：App.vue文件
10 })

　　App.vue文件：

 1 <!--1模板：html結構 -->
 2 <template>
 3   <div id="app">
 4     <img src="./assets/logo.png">
 5     <HelloWorld/>
 6   </div>
 7 </template>
 8 
 9 <!--2行爲：處理邏輯 -->
10 <script>
11 import HelloWorld from './components/HelloWorld'
12 
13 export default {
14  name: 'App',
15  components: {
16     HelloWorld
17   }
18 }
19 </script>
20 
21 <!--3樣式：解決樣式 -->
22 <style>
23 #app {
24   font-family: 'Avenir', Helvetica, Arial, sans-serif;
25   -webkit-font-smoothing: antialiased;
26   -moz-osx-font-smoothing: grayscale;
27   text-align: center;
28   color: #2c3e50;
29   margin-top: 60px;
30 }
31 </style>

模板：
　　template能夠用它去包括一些內容，它自己並不會真正的渲染到dom裏面去，能夠直接使用template標籤包括起來，注意：template裏有且只能有一個根標籤。

行爲：
　　經過import來跟別的組件進行關聯，而後經過

1  export default {
2   name: 'App',
3   components: {
4     HelloWorld
5   }

註冊一下就能夠調用了。

樣式：
　　跟css樣式同樣,這裏再也不作說明。

項目加載過程

　　項目開始：index.html ----> main.js ----> App.vue　　由index.html入口文件，他會執行main.js文件，main.js會實例化咱們的Vue對象，接下來會執行App.vue組件，到了App.vue之後，若是模板有內容的話，他會將模板中的內容插入到index.html的容器當中，也能夠在行爲屬性裏設置對應的屬性。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。