Vue.js的從入門到放棄進擊錄（二）

時間  2019-11-12
標籤 vue.js vue 入門 放棄 進擊 欄目 JavaScript 简体版
原文   原文鏈接

哇塞，昨晚更新的篇（一）這麼多閱讀量，看來入坑的人愈來愈多啦~熬了一個禮拜夜，今天終於生病惹~國慶要肥家咯·因此把篇（二）也更完。但願各位入坑的小夥伴能少跳幾個坑唄、若是有什麼不對的地方也歡迎討論指正。畢竟這些博客我是留着之後翻身成大佬之後留給個人小弟們用的，哈哈哈~css

=======================================================比哈特~===================================================html

慣例慣例、先貢獻一波資料：vue

1.vue官網：https://vuefe.cn/v2/guide/installation.html （敲黑板、官網其實有寫很清楚怎麼安裝腳手架了哈）node

2.vue零基礎入門學習記錄：http://blog.csdn.net/joshua_hit/article/details/59635160  （這是今天才看到的，這個博主應該跟我如今作的東西很像，而後這篇基礎篇寫的很好，能夠幫助理解vue-cli。）webpack

3.elementUI框架官網：http://element.eleme.io/#/zh-CN/component/installationios

4.sublime text3 vue高亮顯示插件：http://blog.csdn.net/zhangwenwu2/article/details/72236609（若是你用的也是sublime text3,能夠下載，而後把壓縮包解壓縮放到 Data-Package 文件夾下面，而後打開編輯器選擇  查看-語法-vue component）web

===========================================================噗噗鹿鹿===============================================vue-router

下面咱們開始正式用vue-cli腳手架搭建一個項目出來看看咯~vue-cli

1.打開上一篇讓安裝的nodejs，而後找到Node.js command prompt這個程序，以下圖。npm

而後打開官網https://vuefe.cn/v2/guide/installation.html，你會看到官網給的

我們照着一步一步來。

①在你電腦找個空曠的位置，創建一個文件夾，好比我是在E盤的front-work文件夾下面建了一個Vue文件夾，而後在Vue文件夾裏面又建了一個放項目的works文件夾。可能有小白菜不會使用命令進入文件夾的，不要方，姐姐有截圖教你怎麼一步步進來。

②輸入  npm install -g vue-cli

而後它就會本身安裝啦，而後安裝完之後是這樣的

你也能夠輸入vue命令檢查版本  vue -V。若是能夠查到就是安裝成功啦。是否是超簡單得er~

③安裝好之後搭建項目，輸入 vue init webpack my-project。而後它會向你覈對

？項目名稱（若是不修改直接按Enter鍵），？項目描述（若是不修改直接按Enter鍵），？做者（若是不修改直接按Enter鍵），？是否是標準安裝（若是不修改直接按Enter鍵），？是否安裝路由（Y），？是否安裝ESLint檢查代碼（n），？安裝仿真測試接口(Y)，？是否安裝端對端測試(Y)                          

（這裏我解釋一下爲何不安裝ESLint，由於這個東西對第一次使用的小白菜很不友好的，連你代碼的空格位置都要進行修改控制，改一個代碼報一堆錯誤反而讓小白菜慌神，因此先建議不要安裝這個代碼檢查。代碼檢查能夠看我之前的博客 ，使用jshint來檢查。傳送門：http://www.cnblogs.com/GuliGugaLiz/p/7388992.html）

④到這裏你的項目就生成啦。接下來咱們進入這個項目，繼續輸入   cd my-project

⑤下載安裝它自己就配置好的模塊，輸入  npm install    

(而後你是第一次安裝的話，估計要等個好一會了。若是在這裏發生了什麼錯誤，能夠去我vue問題記錄裏看看，傳送門：http://www.cnblogs.com/GuliGugaLiz/p/7448406.html       這裏是我常常遇到的，基本能夠解決問題。若是有對應的解決方案，可是輸入瞭解決方案仍是不行，那考慮是你網絡的問題了。你能夠去安裝cnpm，就是淘寶鏡像。而後執行npm 的命令所有改成cnpm就是能夠了，好比：npm install你就輸入cnpm install 。安裝淘寶鏡像傳送門：http://www.jianshu.com/p/1626b8643676）

⑥安裝完畢以後，輸入  npm run dev

（你稍等它一會，它會主動開啓8080端口。若是你的8080端口被佔用要改端口號。那麼你打開你的項目，找到config文件夾下的index.js文件，拉到下面找到port：8080，改爲你想要的其餘端口號，好比什麼8083之類的。）端口位置如圖。

⑦至此，你已經有一個默認項目啦，它自動打開的樣子是這樣的

是否是超簡單得er~

2.瞭解項目的目錄結構，很是重要，雖然vue已經幫咱們配置好了須要的模塊，依賴這些，已經可讓項目運行起來了，可是你要把它寫成本身的項目，你就必需要了解每一個目錄裏面放了什麼東西，你之後要怎麼配置。（很差意思，這裏我盜一下簡書的圖。）

關於配置，須要學習一些webpack的知識，你們有空就去補補吧，我也仍是小白菜一顆，就很少講了。官網傳送門：https://webpack.js.org/guides/

3.理解src文件夾。如今咱們就先不理會怎麼去自定義配置加載各類模塊，先用它自己提供好的架構來練習吧。咱們主要修改的部分是在 src 文件夾裏面。

 

①如今咱們一個一個來看先看App.vue  (在vue中後綴名爲.vue就是vue組件啦）

咱們能夠看到有三個部分構成，第一個是<template></template>  第二部分是 <script></script>  第三部分 <style></style>。

很容易明白了。就是說在.vue文件中的結構就是這三個部分組成。第一個是負責頁面渲染的部分，第二個是些vue的方法邏輯，第三個樣式不用多說了吧。請記住它的結構，由於接下來你自定義組件的時候也是要遵循噠。

②咱們來看main.js

咱們能夠看到main.js在此時是分兩個部分，第一個部分就是引入要在整個項目中引入的組件，入口頁面，路由。第二個部分就是要定義一個vue實例，而且掛載到入口頁面組件App.vue的app元素中，同時遵從router使用頁面路由的安排~

③來看看components文件夾下的Hello.vue

我就不截圖啦，其實這個頁面就是咱們接下來自定義組件的一個參考模板來的。你有木有發現它的結構啊跟App.vue裏總結的同樣的，三段式的。

④下面就看看路由怎麼配置，來看router文件夾下的index.js

第一部分仍是把組件引進來，路由也要引進來，還有咱們要用到的頁面渲染的組件也要引進來，這裏是Hello這個組件。

第二部分就是Vue.use(xxx)，這個要不要用use取決於這個插件。基本都是要寫上use噠，接下來咱們要學的Vuex也是要有的。這樣子咱們的Vue實例就能在全局使用這個東西。大概是這樣。

第三部分就是定義一個Router實例唄，記住它的語法。而後配置就是{path：'/',name:'Hello',component:Hello}這三個是啥意思呢，就是說你的默認路徑就是你的瀏覽器跳轉到默認頁面的時候渲染Hello.vue這裏面的內容。這個name你寫不寫均可以的，對應的是你在Hello.vue裏面（如圖）你定義的名字，其實這裏寫成‘hello’就更好理解了。

4.配置路由。既然講到了路由的問題，那如今咱們作一點改變，來添加一條新的路由。

①.在components文件夾中新增一個Home.vue。代碼以下

<template>
    <div class="home">
     <p>{{msg}}</p>
    </div>
</template>

<script>
    export default{
        name:'home',
        data(){
            return{
                msg:'gaga,Liz'
            }
        }
    }
</script>
Hom.vue

②.在router文件夾的index.js中。引入Home.vue，而後在Router中照貓畫虎的配置

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Home from '@/components/Home'  /*引入Home.vue*/

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }, {               /*配置Home路徑*/
      path: '/home',
      name: 'home',
      component: Home
    }
  ]
})
index.js

③.打開App.vue。爲了容易看，我把logo圖片註釋掉了。而後加入了Home(主頁）的連接。

<template>
  <div id="app">
<!--     <img src="./assets/logo.png"> -->

    <router-link to="/home">主頁</router-link>  <!-- 加上主頁的路由跳轉連接 -->

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
App.vue

④而後看看你的瀏覽器，見證奇蹟的時刻~

而後你點擊主頁，跳轉到主頁的內容了，有木有~好神奇有木有~  hhhh~

============================好的，如今咱們清楚了這個項目是怎麼運做的了。小結一波。========================================

就是組件裏面有<template><div class="compent name"></div></template>來呈現內容，<script>export default{xxxxx}</script>裏面來寫上邏輯，在<style></style>調整頁面樣式。而後這個組件要在哪一個路徑下就進行相應的路由配置唄，配置就是在router下的index.js文件夾裏面引入組件，而後按path，name，component來寫唄。

=======================================================嗯！就是醬紫惹啦~===============================================

5.引入elementUI框架。

接下來咱們就直接進行頁面的美化工做吧。我有了解好幾種UI框架，但就目前來講，elementUI仍是比較多人在用的，也比較全吧，雖然我以爲跟bootstrap對比仍是差了點，嘻嘻，不過elementUI官網文檔真的超友好的，你去看看就知道惹，傳送門：http://element.eleme.io/#/zh-CN/component/installation

有木有~我超喜歡這種的，先呈現了樣子而後直接下面就附帶了代碼，超貼心得er~那咱們就趕忙來學怎麼配合vue來用吧（畢竟如今天色已晚惹~~~）

(若是你是一直跟着我走下來的，這時候你的命令框還在下圖同樣的listening狀態對吧，如今咱們要安裝新的東西，要怎麼退出來呢。這時候你按  ctrl+c  ，而後輸入Y。就退出了。）

①。安裝elementUI。

輸入npm install element-ui -D（官網也有很清楚的安裝過程）

(這裏跟你們說一下，-D就是把這個安裝保存到dev（開發）模式。-S就是save（保存），不過有可能你下次般到別的地方開發的時候又要安裝一次。。。因此咱就-D唄）

是的，這樣就安裝好惹，咱們來看看。。。以前，要從新安裝一次項目，把element-ui加載進來。

輸入命令npm install   （之後裝了東西也是要記得npm install一下。）

而後一塊兒輸入 npm run dev跑起來吧~

而後怎麼來查看是否是裝上啦。你打開目錄 node_modules  -...下拉..下拉...下拉..-element-ui 。真的超多模塊的 有木有，不過看到咱們的element-ui心情超好得er~嘻嘻。

②。一塊兒來使用elementUI吧

a.首先在main.js裏面昭告天下先。按照慣例，把element-ui引進來而且引入一個主題樣式來，而後使用它

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})
main.js

b.在Home.vue裏面使用一個button來看看唄.(直接官網那裏複製管理滴~

<template>
    <div class="home">
     <p>{{msg}}</p>
     <el-button type="primary">主要按鈕</el-button>
    </div>
</template>

<script>
    export default{
        name:'home',
        data(){
            return{
                msg:'gaga,Liz'
            }
        }
    }
</script>
Home.vue

來來來，看看瀏覽器裏面是啥樣子啦

是的，這樣就成功啦。而後你能夠作一個table來顯示你的數據啦。

至於怎麼用table來展現數據，我先給一個簡單的Table.vue組件的代碼給你們吧。（太晚惹，明天再詳細作一個比較完整的table頁面來，還有Vuex,axios都還米有總結，可能我太囉嗦啦，不過對小白菜來講應該很實用。）

===========建議先不打開個人代碼來看，本身看着步驟提示看能不能配置路由啦，會不會用elementUI啦============================

第一步：在components文件夾裏新建一個Table.vue。（elementUI裏面找個你看得順眼的複製下來）

<template>
<div class="table">
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
  export default {
      name:'table',
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1516 弄'
        }]
      }
    }
  }
</script>
Table.vue

第二步：在router文件夾裏的index.js配置一個table路由吧。

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Home from '@/components/Home'  /*引入Home.vue*/
import Table from '@/components/Table'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }, {               /*配置Home路徑*/
      path: '/home',
      name: 'home',
      component: Home
    },{               
      path: '/table',
      name: 'table',
      component: Table
    }
  ]
})
index.js

第三步：在App.vue裏面加上跳轉連接噢。

<template>
  <div id="app">
<!--     <img src="./assets/logo.png"> -->

    <router-link to="/home">主頁</router-link>  <!-- 加上主頁的路由跳轉連接 -->
    <router-link to="/table">表格</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
App.vue

第四步：去瀏覽器看看唄。

============================================以上、明天看狀況繼續更啦、早中午晚安額=======================

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程