Vue 4 -- 獲取原生的DOM的方式、DIY腳手架、vue-cli的使用

時間  2019-12-06
標籤 vue 獲取 原生 dom 方式 diy 腳手架 cli 使用 欄目 HTML 简体版
原文   原文鏈接

1、獲取原生的DOM的方式

　　在js中，咱們能夠經過id、class或者標籤獲取DOM元素，vue中也爲咱們提供了獲取原生DOM的方法，就是給標籤或者組件添加ref屬性，經過this.$refs獲取，以下：css

<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 建立一個全局組件Test
    Vue.component('Test', {
        data(){
            return {}
        },
        template:`<div>我是測試組件</div>`
    });
    // 建立一個全局組件Test2
    Vue.component('Test2', {
        data(){
            return {}
        },
        template:`<div>我是測試組件2</div>`
    });
    // 聲明一個局部組件App
    let App = {
        data(){
            return {}
        },
        template:`
            <div class="app">
                <input ref="input" type="text">
                <Test ref="test"></Test>
                <Test2 ref="testB"></Test2>
            </div>
        `,
        // DOM加載完成後調用mounted
        mounted(){
            // this.$refs.input   獲取input輸入框
            this.$refs.input.focus();
            // this.$refs.test    獲取Test組件實例對象
            // this.$refs.test.$parent    獲取Test組件的父組件
            // this.$refs.test.$root    獲取根實例對象Vue
            // this.$children   獲取當前組件的全部子組件，是一個列表
            // this.$refs        獲取全部有ref屬性的DOM元素或者組件實例對象
            // for循環遍歷
            for(let key in this.$refs){
                console.log(this.$refs[key])
            }
        }
    };
    // Vue實例對象
    new Vue({
        el: '#app',
        data() {
            return {}
        },
        template:`<App></App>`,
        components:{
            App  // 掛載組件App
        }
    })
</script>

　　總結：html

　　　　1）<div ref="ha">哈哈哈</div>  給標籤添加ref屬性，this.$refs.ha 獲取原始DOM對象前端

　　　　2）<Home ref="abc"></Home>   給組件添加ref屬性，this.$refs.abc 獲取組件實例化對象vue

2、DIYvue-cli腳手架

　　DIY腳手架是爲了輔助咱們更深刻理解vue-cli中的文件結構，開發過程無需本身寫腳手架，使用vue-cli便可。node

　　YEOMAN網址：http://yeoman.io/python

　　vue-cli中使用了es6的module模塊化編程，可是前端瀏覽器不支持模塊化中的語法（導入import和導出export default等），咱們須要藉助webpack工具讓它去支持，而webpack的使用須要依賴nodejs環境，全部後臺語言都是支持模塊的，nodejs是一種基於JavaScript的服務器語言。webpack

　　在diy腳手架以前，先了解一下webpack（前端中的工具，官網：https://www.webpackjs.com/），它是一個打包工具（前端中三大打包工具備grunt、gulp和webpack）。點擊查看webpack詳情>>>git

一、es6的module（下面示例中main.js依賴module.js模塊）

// module.js
var person = {
　　name: '張三',
　　fav:function(){
　　　　alert(1);
　　}
}
export default person;

var name;
name = 23;
export {name} 

export var num2 = 34;

export function add(){
　　alert(2);
}
// main.js
import * as a from './module.js'     // *與css中的符號衝突，所以能夠起一個別名a

　　總結：上面示例中，main.js文件用到了module.js中的變量，這時要用webpack將這兩個打包成一個bundle.js文件，在html文件中直接引用bundle.js便可，因此，咱們將main.js做爲入口文件，bundle.js做爲出口文件，使用命令webpack ./main.js ./bundle.js進行編譯，生成bundle.js，注意你想在哪一個目錄下生成bundle.js文件就要進入哪一個目錄下執行命令。且修改了代碼就要編譯，這種手動編譯的方式顯得很笨重，後面介紹的腳手架vue-cli會自動幫咱們作這些工做。es6

二、模塊化深刻

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
// App.js - 這是一個App組件
let App = {
    template:`
        <div>我時App組件</div>
    `
};

export default App
// main.js - webpack入口文件，依賴vue.js和App.js
import Vue from './vue.js'
import App from './App.js'

new Vue({
    el:'#app',
    data(){
        return {}
    },
    template:`<App></App>`,
    components:{
        App
    }
});

　總結：這種方式仍是要依賴webpack軟件，手動執行webpack ./main.js ./bundle.js命令，編譯生成bundle.js方可運行，仍是沒有帶來多少方便。執行命令後效果以下圖：web

三、使用npm和DIY腳手架過程其實咱們可使用node的npm（node package manager，即包管理器，至關於python中的pip3），也就是在項目中使用npm下載webapck模塊，接下來咱們先來學習如何使用npm和一步步DIY腳手架。

　　// 以上例中目錄爲例，進入到當前項目目錄module_deep

　　// 執行下面命令後會在當前目錄下生成package.json文件

1
npm init  - - yes   / /  - - yes表示直接在當前目錄生成package.json文件，不然會問一些參數

　　// 下載webpack包，-D（即devDependencies）表示開發環境下依賴webpack包

　　// 執行下面命令後會在package.json中的devDependencies字段中添加一條"webpack":"^3.12.0"

1
npm i webpack@ 3.12 . 0  - D      / /  下載過cnpm的可使用npm i webpack@ 3.12 . 0  - D命令代替

　　// npm ...會執行package.json中的"script"字段中的命令，也就是說若package.js中script字段以下：

"script": {
  "dev" : "webpack ./main.js ./bundle.js"
}

　　// 那麼執行npm run dev至關於執行webpack ./main.js ./bundle.js，結果同上，即生成bundle.js

　　// 若package.json中script字段中dev字段對應的是webpack，以下：

"script": {
  "dev" : "webpack"
}

　　// 那麼，npm會自動去找當前目錄下的webpack.config.js文件

　　// 其中都是nodejs代碼，包括webpack的入口文件，輸出文件，webpack.config.js內容以下：

module.exports = {
    entry:{
        'main': './main.js'
    },
    output:{
        'filename': './bundle.js'
    }
}

　// 因此，當按照上述步驟配置好了package.json和webpack.config.js這兩個文件時，一樣能夠執行

1
npm run dev

　　// 自動生成出口文件bundle.js，到此，咱們一直要手動執行命令，雖然命令愈來愈簡單，但結果同樣

　　// 在開發環境中，咱們但願它能夠監聽到當修改代碼後，自動編譯

　　// 在開發完成準備上線時，咱們須要進行打包編譯一次

　　// 這時咱們就不要再用webpack.config.js文件做爲配置文件了，因生產和開發環境需求不一樣

　　// 因此用如下兩個文件來替代webpack.config.js文件，在webpack.json中指定好便可

　　// webpack.dev.config.js做爲開發環境下的配置文件

　　// webpack.pro.config.js做爲生產環境下的配置文件

　　// webpack.json指定方式以下

"script": {
　　"dev" : "webpack --config ./webpack.dev.config.js",   // 開發環境
　　"build" : "webpack --config ./webpack.pro.config.js"   // 生產環境
}

　　// 除了js文件，咱們還有css文件，這是要在入口文件main.js中增長導入css文件的語句，以下：

import './index.css'

　　// 這時直接編譯會報以下錯誤：

　　// 下載css文件和style標籤的解析器，css-loader解析css文件，style-loader解析style標籤// 由於對於webpack來講，css文件也是一個模塊，可是像這樣的文件，webpack須要loaders處理

1
npm i css - loader style - loader  - D

　　// 在webpack.dev.config.js和webpack.pro.config.js中配置css文件的loader，以下：

module.exports = {
    entry:{
        'main': './main.js'
    },
    output:{
        'filename': './bundle.js'
    },
    watch:true, // 監聽代碼修改自動生成bundle.js，編譯hung住，只在開發環境
    module:{
        loaders:[  //loader加載器，對es6代碼的解析，一個叫babel-loader的
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'
            }
        ]
    }
}

　　// 下載html-webpack-plugin插件，用於將index.html放入dist目錄下

1
npm i html - webpack - plugin  - D    / /  - D 至關於  - - save - dev

　　// 注意：經過npm下載的包直接導入便可，以下：

const HtmlWebpackPlugin = require('html-webpack-pligin');

　　// 而且要在webpack.dep.config.js中配置，以下：

plugins:[
    new HtmlWebpackPlugin({
        template:'./index.html',  // 參照物
    })
]

　　// 執行命令npm run dev後，自動生成文件dist，其中是index.html和bundle.js文件

　　// 而vue是模塊化開發，App.js爲App.vue文件

　　// 下載vue解析器，vue-loader解析vue文件，vue-template-compiler解析vue文件中template

1
npm install vue - loader@ 14.1 . 1  vue - template - compiler@ 2.5 . 17  - D

　　// 接下來就能夠建立App.vue文件，文件內容可以下：

<template>
    <div>我是一個App</div>
</template>

<script>
export default {
    name:'App',  // 給當前組件起名
    data(){
        return {}
    },
    methods:{
    
    }
}
</script>

<style>

</style>

　　// 下載vue和vue-router

npm i vue vue-router -S    // vue和 vue-router是項目依賴，-S表示保存項目依賴的包

　　// 引用直接寫下載包的名字便可，不用再寫路徑了，以下：

import Vue from 'vue'

　　// 下載webpack-dev-server，是webpack的升級版，在前端搭一個服務器，即nodejs

1
npm install webpack - dev - server  - - save - dev

　　// 配置package.json，以下

"script": {
  "dev" : "webpack-dev-server --open --hot --inline --config ./webpack.dev.config.js",  // 開發環境下自動打開瀏覽器，自動刷新   
  "build": "webpack --config ./webpack.pro.config.js"
}

　　// 渲染機制render

render:c=>c(App)

　　// 最後npm run dev便可運行項目，經過訪問它開的服務器能夠訪問頁面，至此，咱們已經一步步搭好了一個腳手架，在此基礎上開發便可，接下來學習的腳手架就幫咱們作好了這些工做，它生成的目錄結構跟咱們本身建立的相似。

3、vue-cli的使用

　　使用腳手架建立一個項目，只要下載了vue-cli就有了vue的命令

1
vue  - V    / /  查看vue版本

　　目前可用的模板有webpack模板和webpack-simple模板，咱們主要用前者，後者簡單瞭解

一、使用webpack-simple模板建立項目

　　// init初始化命令是版本2的命令，拉取了cli2後，便可用版本2又可用版本3的

1
vue init webpack - simple  04 - my - project    / /  自動生成名爲 04 - my - project的項目，目錄以下 
04-my-project
　　|--.babelrc
　　|--.editorconfig
　　|--.gitignore
　　|--index.html
　　|--package.json
　　|--README.json
　　|--webpack.config.js
　　|--src
　　　　|--App.vue
　　　　|--main.js
　　　　|--assets
　　　　　　　|--...

　　// 執行下面命令，下載package.json中的包，注意必定要進入當前項目，即cd 04-my-project

1
npm install      / /  執行後項目文件下生成node_modules目錄

　　// 啓動項目

1
npm run dev

　　// 下載vue-router

1
npm i vue - router  - S      / /  - S下載到當前項目中

　　// vue提供scoped屬性，使得style屬性只對當前組件有效，不寫就是全局有效

<style scoped></style>

二、使用webpack模板建立項目

　　// 建立項目

1
vue init webpack  05 - webpack - project    / /  建立項目名爲 05 - webpack - project的項目

　　// 若使用單頁面應用，則vue-router選項輸yes，其餘都是no，電腦有npm就選擇npm下載

　　// 進入項目

1
cd  05 - webpack - project

　　// 安裝依賴的包

1
npm install

　　// 啓動項目

1
npm run dev

　　// 最後生成目錄以下

05-webpack-project
　　|--.babelrc
　　|--.editorconfig
　　|--.gitignore
　　|--.postcssrc.js
　　|--index.html
　　|--package.json
　　|--README.md
　　|--build 文件夾
　　|--config 文件夾
　　|--node_modules 文件夾
　　|--src 文件夾
　　|--static 文件夾

　　注意：nodejs中有這樣一個機制，即若一個文件夾下只有index.js，則直接寫文件夾名字便可。

　　接下來就能夠寫項目了！

四、使用elementui（ElementUI依賴vue，引用了要Vue.use(ElementUI)）

　　// 下載到項目中

1
npm i element - ui  - S

　　詳細內容參見官網：http://element-cn.eleme.io/#/zh-CN

　　main.js中使用

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

五、全局css

　　全局css樣式文件，能夠在static下建立global文件夾，建立index.css，再在main.js中引用便可。

　　main.js中引用方式以下：

import '../static/global/index.css'

五、query查詢（會在當前路徑下拼接查詢條件 '?userid=2'，後期將等號後邊的動態起來）

<router-link :to="{name:'Course', query:{userid:2}}">免費課程</router-link>

4、補充知識點

一、下載webpack命令

1
npm i webpack@ 3.12 . 0  - g       / /  - g表示 global

　　若是出現下面的錯誤，則再執行npm cache clear --force，以下圖：

　　經過module.exports = 變量  拋出二、CMD須要在nodejs的環境下

　　經過require('./time.js')  引入

　　這是CMD規範，瞭解便可，而vue中使用的是es6的module規範。

二、pycharm安裝vue

　　1）file - > settings - >Plugins搜索vue，點擊Search in repositonies，以下圖：

　　2）點擊左側Vue.js，點擊右側綠色按鈕Install，以下圖：

 　　3）安裝完成後重啓pycharm便可。

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