Vue.js構建項目筆記1:vue-cli

時間 2019-11-12

標籤 vue.js vue 構建項目筆記 cli 欄目 JavaScript 简体版

原文原文鏈接

一.一些簡單的話

若是你學習或者使用過angularjs（1.x），你就會很是瞭解指令的使用，如：ng-click ng-if ng-show ng-src。固然還有控制器和各類服務。html

若是你學習或者使用過react，你就會很是瞭解組件的使用，一樣的其實在angularjs（1.x）也有directive自定義指令建立公用模版部分。vue

vuejs是實現mvvm的一種框架，他沒有ng那樣複雜的規則和繁多的語法，並且使用虛擬dom提高了咱們單頁開發項目的速度。他也不想react那麼的「簡單」，由於他有不少經常使用讓你處理更快速的語法和規則，學習和學會使用vuejs能讓咱們在之後的網站開發中多一個更多的選擇（最重要的掌握vue絕對是快於ng和react的，並且有好的官網學習網站）。node

你是用過ng1.x在實際項目會配合ng-ui-router，也許還有其餘；你使用react會配合redux和react-router和其餘中間件。react

一樣的vuejs配合的就是vue-router和vuex，也許對於ajax的處理你還須要一個框架！jquery

二.webpack+vue-cli搭建應用

咱們這裏不會使用相似jq的方式，在index.html引入一個類庫去學習如何使用，咱們會直接使用vue的構建工具直接在構建好的項目下學習vuejs，若是不知道webpack（https://my.oschina.net/tbd/blog/1541956）webpack

若是不知道如何安裝和使用vue-cli：ios

首先安裝node（百度，系統？64？32？選擇安裝）
node -v
npm -v
監測是否安裝angularjs

webpack安裝：
npm install -g webpack 全局安裝
npm install webpack 項目下安裝es6

Vue腳手架安裝：
vue-cli
安裝：
npm install -g vue-cli 全局安裝
npm install vue-cli 項目下安裝web

建立項目：
vue init webpack-simple study-vue （描述，做者，是否使用sass,咱們no？敲入n）
cd study-vue 切換到建立的項目

三.修改顯示內容

上面的安裝很是明確，這時候就算你對node，npm，webpack，vue-cli仍是一臉矇蔽，你按着流程走下來，也都安裝好了！

咱們打開咱們的study-vue文件夾，看看咱們都有了什麼。

若是你沒有node等的基礎，不瞭解webpack沒有關係，我作一個簡單的介紹：

index.html就是咱們的靜態核心頁面，咱們完成單頁開發，單頁指的就是這個頁面。

package.json是包文件，裏面會配置依賴：

就是咱們須要什麼框架和工具類庫用於咱們的項目，除了截圖部分，若是你須要jquery，也能夠配置進入。

配置的依賴，其實咱們本地尚未下載好，咱們執行下面命令：

npm install

執行以後，會自動讀取package.json，安裝配置內容，下載到本地，等待完成：

打開這個文件，你能夠看到你配置的各類依賴和相關引用。

記住下面的命令，啓動你的項目：

npm run dev

瀏覽器效果：

不少他的內置工做你不須要了解，你知道找到下面文件修改便可：

<template>
  <div id="app">
    <h3>{{msg}}</h3>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'helloworld'
    }
  }
}
</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>

瀏覽器效果：

四.npm run dev

在index.html咱們發現引用了一個沒有的文件

可是咱們瀏覽器卻看到了效果，而咱們的main.js裏面纔看到使用vue文件了：

咱們只要記住，在npm run dev指令啓動以後，瀏覽器打開的頁面會自動使用main.js，而且自動引用相關便可（深究多了彷佛沒有用，你實際上是學習vue，而不是學習構建工具的原理）！

這是main.js：

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

new Vue({
  el: '#app',
  render: h => h(App)
})

裏面運用了es6的知識，若是你不瞭解（https://my.oschina.net/tbd/blog/1541903）

咱們修改代碼之後，瀏覽器會自動刷新！

五.輸出helloworld

咱們修改兩個文件，一個是main.js:

import Vue from 'vue'

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>stydy-vue</title>
  </head>
  <body>
    <div id="app"><h3>{{ message }}</h3></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

咱們能夠看到，會找到id叫app的位置，而後{{}}裏面的會被動解析出dada設置的內容。

咱們在data裏面多設置一些key和val，而後在html中顯示他們，咱們就知道如何工做了：

import Vue from 'vue'

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  }
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>stydy-vue</title>
  </head>
  <body>
    <div id="app"><h3>{{ message }}{{d2}}{{d3}}</h3></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

效果以下：

六.設置應用範圍（掛載）

最簡單的就是data裏面設置的字段，{{}}包含是能夠解析的，這個{{}}是有範圍的，若是是一個普通html{{}}確定不起做用，其實這個應用範圍就是在哪一個位置內部使用vue的處理，

1.el 設置

vue提供的就是在新建實例設置el屬性，這個#app就是找到id叫這個的元素，一樣能夠是.app類名叫這個的，

import Vue from 'vue'

var app = new Vue({
  el: '.app',
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  }
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>stydy-vue</title>
  </head>
  <body>
    <div class="app"><h3>{{ message }}{{d2}}{{d3}}</h3></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

也能夠document獲取一個元素節點，

import Vue from 'vue'

var app = new Vue({
  el: document.getElementById("app"),
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  }
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>stydy-vue</title>
  </head>
  <body>
    <div id="app"><h3>{{ message }}{{d2}}{{d3}}</h3></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

2.vm.$mount()

支持手動掛載：

import Vue from 'vue'

var app = new Vue({
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  }
})
app.$mount("#app")

這樣寫一個意思：

import Vue from 'vue'

var app = new Vue({
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  }
}).$mount("#app")

七.渲染結構

1.普通設置

咱們如今的結構渲染是在html的內部：

2.template 設置

import Vue from 'vue'

var app = new Vue({
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  },
  template:"<div id='app'><h3>{{ message }}{{d2}}{{d3}}</h3></div>"
}).$mount("#app")

咱們能夠看到掛在位置都會被template的模版內容替換掉：

3.render 使用jsx渲染

render的方法會在回調中獲取createElement，

咱們的第一個參數使用標籤的形式去使用：

import Vue from 'vue'

var app = new Vue({
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  },
  template:"<div id='app'><h3>{{ message }}{{d2}}{{d3}}</h3></div>",
  render:function(createElement){
	  return createElement("div","<h3>"+this.message+this.d2+this.d3+"</h3>")
  }
}).$mount("#app")

當render和template都存在，咱們的render會剔掉template的設置：

一樣的createElement是支持組件對象的，咱們立刻學習組件的使用。

八.設置組件

vue最最重要的就是組件的使用，開始就是組件開發，組件有多種模版設置方式，不過都很簡單。

咱們直接看最簡單方式：

// 註冊
Vue.component('my-component', {
  template: '<div class="zj">123</div>'
})

這樣咱們就設置好了一個組件，咱們使用組件和寫div相似：

import Vue from 'vue'

// 註冊
Vue.component('my-component', {
  template: '<div class="zj">123</div>'
})


var app = new Vue({
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  }
}).$mount("#app")

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>stydy-vue</title>
  </head>
  <body>
    <div id="app"><my-component></my-component></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

這時候咱們學會了定義一個組件，也知道了組件對象的形式，咱們解決render的問題：

import Vue from 'vue'

// 註冊
var App= {
  template: '<div id="app">123</div>'
}


var app = new Vue({
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  },
  render:function(createElement){
	  return createElement(App)
  }
}).$mount("#app")

咱們的createElement使用了組件對象作參數，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>stydy-vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

咱們再次結合組件去處理，把設置的組件放在裏面：

import Vue from 'vue'

var App= {
  template: '<div id="app"><my-component></my-component></div>'
}


// 註冊
Vue.component('my-component', {
  template: '<div class="zj">我是自定義組件</div>'
})




var app = new Vue({
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  },
  render:function(createElement){
	  return createElement(App)
  }
}).$mount("#app")

效果：

咱們已經寫好了一個App組件對象，這個就是咱們render的主結構。

也一樣支持render的方式設置組件模版，若是你須要的話。

組件模版定義有大概四種方式：

1.template直接定義

2.script定義和引用

3.render的jsx

4.異步渲染

咱們學習當中使用template直接定義便可！

九.總結

咱們把main.js作es6的改造：

import Vue from 'vue'

var App= {
  template: '<div id="app">helloworld</div>'
}


var app = new Vue({
  render:h=>h(App)
}).$mount("#app")

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>stydy-vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

若是你還記得最開始建立項目的代碼：

再看看App.vue文件你或許應該明白在vue文件最後被解析成什麼了:

咱們修改一下App.vue的代碼，若是你還不明白：

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

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

這時候咱們就會發現，其實一個vue文件最終被解析好的就是組件對象形式，他利用的就是：

十.其餘瞭解

採用 vue init webpack 構建項目，可在config/index.js配置代理等

首先安裝node（百度，系統？64？32？選擇安裝）
node -v
npm -v
監測是否安裝

webpack安裝：
npm install -g webpack 全局安裝
npm install webpack 項目下安裝

Vue腳手架安裝：
vue-cli
安裝：
npm install -g vue-cli 全局安裝
npm install vue-cli 項目下安裝

建立項目：
vue init webpack（根據提示設置）

安裝依賴
npm install

須要其餘依賴
打開package.json
若是須要使用vue-router和vuex
在devDependencies最後加入對應配置：
"vue-router": "^",
"vuex": "^"
若是還須要axios，同理
npm install 執行後等待安裝好全部依賴

啓動項目：
npm run dev # 一切就緒！

打包合併生成項目：
npm run build 執行命令，等待完成
（合成後直接打開靜態頁面index.html報錯？
能夠修改config下index.js配置
assetsSubDirectory的屬性
'/static'修改成'static'

後續安裝依賴：
沒有vue-router?????
執行：
npm install vue-router
還須要vuex?????同理


重要說明：
babel-polyfill模塊保證es6的語法在ie9 10獲得支持（如es6的生成器等，map類型等）

相關標籤/搜索

每日一句

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