vue入門|ElementUI使用指南

 

vue入門|ElementUI使用指南

1.開發前務必熟悉的文檔：

vue.js2.0中文,項目所使用的js框架
vue-router,vue.js配套路由
vuex      狀態管理
Element UI框架

2.構建項目框架

全局安裝腳手架環境
npm install -g vue-cli
建立一個基於webpack模板項目my-project
vue init webpack my-project
進入項目
cd my-project
安裝依賴
npm install
啓動項目
npm run dev

備註：vue init 再3.x之後建議用vue create，請參考https://cli.vuejs.org/zh/guide/creating-a-project.html#%E6%8B%89%E5%8F%96-2-x-%E6%A8%A1%E6%9D%BF-%E6%97%A7%E7%89%88%E6%9C%AC

Vue CLI >= 3 和舊版使用了相同的 vue 命令，因此 Vue CLI 2 (vue-cli) 被覆蓋了。若是你仍然須要使用舊版本的 vue init 功能，你能夠全局安裝一個橋接工具：

npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同
vue init webpack my-project

3.運行項目以後看到下面界面，說明安裝成功

說下項目結構：

Vue項目結構圖：

簡單介紹目錄結構

build目錄是一些webpack的文件，配置參數什麼的，通常不用動 
config是vue項目的基本配置文件 
node_modules是項目中安裝的依賴模塊 
src源碼文件夾，基本上文件都應該放在這裏。 
　　—assets 資源文件夾，裏面放一些靜態資源 
　　—components這裏放的都是各個組件文件 
　　—App.vue App.vue組件 
　　—main.js入口文件 
static生成好的文件會放在這個目錄下。 
.babelrc babel編譯參數，vue開發須要babel編譯 
.editorconfig 看名字是編輯器配置文件，不曉得是哪款編輯器，沒有使用過。 
.gitignore 用來過濾一些版本控制的文件，好比node_modules文件夾 
index.html 主頁 
package.json 項目文件，記載着一些命令和依賴還有簡要的項目描述信息 
README.md 介紹本身這個項目的，想怎麼寫怎麼寫。不會寫就參照github上star多的項目，看人家怎麼寫的

我混淆不清楚的幾個文件

1.index.html 
主頁咱們能夠像平時普通的html文件同樣引入文件和書寫基本信息，添加meta標籤等。

2.main.js 
這裏是入口文件，主要做用是初始化vue實例並使用須要的插件。

import Vue from 'vue'
import App from './App'
import router from './router'

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

3.App.vue 
這是一個標準的vue組件，包含三個部分，一個是模板，一個是script，一個是樣式，這裏須要瞭解vue的基礎。

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

<script>
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</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>

在webpack的配置文件裏，設置了main.js是入口文件，咱們的項目默認訪問index.html，這個文件裏面<div id="app"></div>和App.vue組件裏面的容器完美的重合了，也就是把組件掛載到了index頁面，而後咱們只須要去建設其餘組件就行了，在App組件中咱們也能夠引入，註冊，應用其餘組件，後面我會介紹如何經過路由將其餘組件渲染在App組件，這樣咱們就只須要去關注每一個組件的功能完善。

就是說vue的默認頁面是index.html，index中的<div id="app"></div>掛載了App.vue這個大組件，而後全部的其餘子組件（hello.vue等）都歸屬在App.vue這個主組件下。

main.js 是入口文件，做用是初始化vue實例並使用須要的插件（router等）。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

4.安裝element-ui

npm install element-ui -S
S表明save 安裝到本地開發者環境中
檢查一下package.json看看是否安裝成功，若是有element-ui 表示安裝成功

5.導入element-ui

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)//全局使用ElementUI

若是沒報錯的話，就能夠正常使用啦

6.接下來咱們就能夠參照Element的官方文檔上手開發了

demo:

咱們只須要改動HelloWorld.vue的內容

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-progress type="circle" :percentage="0"></el-progress>
    <el-progress type="circle" :percentage="25"></el-progress>
    <el-progress type="circle" :percentage="100" status="success"></el-progress>
    <el-progress type="circle" :percentage="50" status="exception"></el-progress>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  }
}
</script>

效果以下圖所示：

vue項目打包步驟

終端運行命令 npm run build

打包成功的標誌與項目的改變，以下圖：

點擊index.html，經過瀏覽器運行，出現如下報錯，如圖：

那麼應該如何修改呢？
具體步驟以下：
一、查看package.js文件的scripts命令
二、打開webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl點擊，跳轉到index.js文件
三、其中dev是開發環境，build是構建版本，找到build下面的assetsPublicPath: '/',而後修改成assetsPublicPath: './',即「/」前加點。
四、終端運行 npm run build 便可。

此時點擊index.html，經過瀏覽器運行便，會發現動態綁定的static的圖片找不到，故static必須使用絕對路徑。將圖片路徑修改成絕對路徑，至此，打包完成。

能夠參考，有些css樣式裏面路徑存在問題http://www.javashuo.com/article/p-thmquqdr-z.html

 

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

vue-cli + webpack 多頁面實例應用

關於vue.js

vue.js是一套構建用戶界面的 輕型的漸進式前端框架。它的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。使用vue能夠給你的開發帶來極致的編程體驗。

關於vue-cli

Vue-cli是vue官方提供的一個命令行工具（vue-cli），可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需一分鐘便可啓動帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目。

疑問

vue-cli主要是用於構建單頁應用的腳手架，可是現實項目中，大部分項目都是多頁的，怎麼樣能夠很好的利用這一套官方配置呢？我在網上找了一下， 幾乎找不到vue多頁應用實例，因此纔有基於vue-cli生成的單頁應用進行改造。

代碼地址：

Github：https://github.com/breezefeng/vue-cli-multipage，你們要是以爲好用就給一個star支持下吧~

使用方法

# install dependencies
npm install

# serve with hot reload at localhost:8080/module/index.html
npm run dev

# build for production with minification
npm run build

目錄結構

vue-cli-multipage
  |---build
  |---config
  |---src
    |---assets
      |---img 圖片文件
      |---css 樣式文件
      |---font 字體文件      
    |---components  組件
      |---Button.vue 按鈕組件
      |---Hello.vue
    |---module
      |---index  首頁模塊
        |---index.html
        |---index.js
        |---App.vue
      |---detail  詳情頁模塊
        |---detail.html
        |---detail.js
        |---App.vue

從目錄結構上，各類組件、頁面模塊、資源等都按類新建了文件夾，方便咱們儲存文件。

其實咱們全部的文件，最主要都是放在module文件夾裏，以文件夾名爲html的名稱。

例如：

|---index  首頁模塊
  |---index.html
  |---index.js
  |---App.vue

此時咱們訪問的連接是：

http://localhost:8080/module/index.html

這裏必定要注意，在module裏下級文件夾裏須要將html，js，vue template 都統一放在當前文件夾裏，固然你也能夠繼續放其餘的資源，例如css、圖片、組件等，webpack會打包到當前頁面裏。

若是項目不須要這個頁面了，能夠把這個文件夾直接刪除掉，乾淨利落，幹活也開心。

像之前傳統的開發項目，全部的圖片都習慣放在images裏，當項目有改動時，有些圖片等資源用不上了，但還佔着坑位，致使項目愈來愈大，雖然如今的硬件容量大到驚人，但咱們應該仍是要養到一個良好的習慣。

組件的使用

組件（Component）是 vue.js 最強大的功能之一，當你發現使用組件能夠減小造輪子裏，你會深深的愛上它。

咱們的組件都是放在components目錄下的，調用組件的方法也很簡單。

import Hello from 'components/Hello'

而後記得在*.vue註冊導入的組件，要否則會沒法使用。

import Hello from 'components/Hello'

export default {
  name: 'app',
  components: {
    //在這裏註冊組件，否則沒法使用
    Hello
  }
}

構建代碼說明

那咱們使用的是vue-cli的手腳架，用過vue-cli的同窗都知道構建代碼是放在根目錄build下，vue多頁面主要修改了這三個JS文件：webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js。

/**
**    [webpack.base.conf.js]這裏主要列出相關代碼的修改點，具體代碼請看build/webpack.base.conf.js
*/
var entries = getEntry('./src/module/**/*.js'); // 得到入口js文件

module.exports = {
  entry: entries,
  ....
}

function getEntry(globPath) {
  var entries = {},
    basename, tmp, pathname;

  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry));
    tmp = entry.split('/').splice(-3);
    pathname = tmp.splice(0, 1) + '/' + basename; // 正確輸出js和html的路徑
    entries[pathname] = entry;
  });

  return entries;
}

/**
**    [webpack.prod.conf.js]這裏主要列出相關代碼的修改點，具體代碼請看build/webpack.base.prod.js
*/
function getEntry(globPath) {
  var entries = {},
    basename, tmp, pathname;

  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry));
    tmp = entry.split('/').splice(-3);
    pathname = tmp.splice(0, 1) + '/' + basename; // 正確輸出js和html的路徑
    entries[pathname] = entry;
  });
  return entries;
}

var pages = getEntry('./src/module/**/*.html');

for (var pathname in pages) {
  // 配置生成的html文件，定義路徑等
  var conf = {
    filename: pathname + '.html',
    template: pages[pathname],   // 模板路徑
    inject: true,              // js插入位置
    minify: {
      //removeComments: true,
      //collapseWhitespace: true,
      //removeAttributeQuotes: true
    },
    // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    chunksSortMode: 'dependency'
  };

  if (pathname in module.exports.entry) {
    conf.chunks = ['manifest', 'vendor', pathname];
    conf.hash = true;
  }

  module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}