天天看點
傳回

Vue.js系列之入門手冊整理

文章目錄
  • 第一章、環境搭建
    • 1.1、準備：
    • 1.2、nodejs安裝
    • 1.3、npm安裝
    • 1.4、vue安裝
  • 第二章、目錄結構
    • 2.1、webpack
    • 2.2、webpack下的全局檔案結構
  • 第三章、Vue調試
    • 3.1、下載下傳工程
    • 3.2、安裝cnpm支援
    • 3.3、建構devtools
    • 3.4、devtools常用問題
  • 第四章、定義頁面
    • 4.1、建立頁面
    • 4.2、定義路由
  • 附錄資料

第一章、環境搭建

1.1、準備：

  • npm: 6.9.0 (npm > 3.0)
  • node: v10.15.3 (node > 6.11.5)
  • vue: 2.0+

1.2、nodejs安裝

window系統可以直接去官網下載下傳：https://nodejs.org/en/

1.3、npm安裝

檢視npm版本

npm -v

複制

更新npm

cnpm install npm -g

複制

更新或安裝cnpm

npm install cnpm -g

複制

國内直接使用 npm 的官方鏡像是非常慢的，這裡推薦使用淘寶 NPM 鏡像

npm install cnpm -g --registry=https://registry.npm.taobao.org

複制

1.4、vue安裝

安裝vue，-g 表示給他們安裝成全局可以使用的包。

cnpm install vue vue-cli -g

複制

運作vue

建立一個基于 webpack 模闆的新項目my-project:

vue init webpack my-project

複制

安裝依賴

cd my-project
cnpm install

複制

以預設端口來運作：

npm run dev

複制

安裝成功之後，通路：

http://localhost:8080

Vue.js系列之入門手冊整理

第二章、目錄結構

2.1、webpack

webpack簡介，webpack是一個前端資源加載/打包工具，将各種js/css/html代碼最後打包編譯到一起。vuejs已經內建

2.2、webpack下的全局檔案結構

目錄/檔案 說明
build/ 編譯建構用到的腳本
config/ 各種配置檔案
dist/ 打包後的檔案夾
node_modules/ node的第三方包
src/ 源代碼
static/ 靜态資源檔案
test/ 測試目錄
index.html 最外層檔案
package.json node項目配置json
README.md markdown的說明文檔

build

build/
    build.js
    check-versions.js
    dev-client.js
    dev-server.js
    utils.js
    vue-loader.conf.js
    webpack.base.conf.js
    webpack.dev.conf.js
    webpack.prod.conf.js

複制

  • build.js

打包建構使用，不能随意修改

  • check-version.js

檢測npm的版本，不能随意修改

  • dev-client.js和dev-server.js

伺服器腳本，不能随意修改(PS:借助于nodejs，$npm run dev 就可以打開一個server，運作vuejs)

  • units.js

css/sass 等檔案的生成工具腳本，不能随意修改

  • vue-loader.conf.js

用于輔助加載vuejs用到的css source map等内容

  • webpack.base.conf.js

一些基礎的配置檔案，不能随意修改

  • webpack.dev.conf.js

開發模式的基礎配置檔案，不能随意修改

  • webpack.prod.conf.js

生産模式的基礎配置檔案，不能随意修改

config

config/
    dev.env.js
    index.js
    prod.env.js

複制

  • index.js

定義了 開發時的端口（預設是8080），定義了圖檔檔案夾（預設static)， 定義了開發模式下的 代理伺服器

  • dev.env.js

開發環境模式的配置檔案

  • prod.env.js

生産環境模式的配置檔案

dist

打包之後的檔案所在目錄

node_modules

node項目需要的第三方庫

src

源代碼的檔案夾

▾ src/
  ▾ assets/
      logo.png
  ▾ components/
      HelloWorld.vue
  ▾ router/
      index.js
    App.vue
    main.js

複制

  • assets: 存放圖檔的檔案夾
  • components: 用到的"視圖"和"元件"所在的檔案夾。
  • router/index.js 路由檔案。 定義了各個頁面對應的url.
  • App.vue 如果index.html 是一級頁面模闆的話，這個App.vue就是二級頁面模闆。 所有的其他vuejs頁面，都作為該模闆的 一部分被渲染出來。
  • main.js 廢代碼。沒有實際意義，但是為了支撐整個vuejs架構，存在很必要。

第三章、Vue調試

VueJs有提供調試Vue devtools工程，內建到Chrome插件

3.1、下載下傳工程 

git clone https://github.com/vuejs/vue-devtools

複制

3.2、安裝cnpm支援

在vue-devtools檔案夾安裝cnpm支援

cd vue-devtools //跳轉到vue-devtools檔案夾
cnpm install //安裝cnpm環境支援，也可以npm install

複制

3.3、建構devtools 

npm run build

複制

編譯成功之後，就選擇chrome的添加拓展程式，選擇開發者模式，選擇vue-devtools\shells\chrome檔案夾，就可以将編譯好的chrome插件引到chrome裡

比較順利的是直接安裝就可以按F12調試了，如果有遇到下列問題，可以參考我的解決方法：

3.4、devtools常用問題

npm run build報錯

編譯devtools工程出現報錯：

...
 @ D:/VueJs/vue-devtools/src/devtools/components/StateInspector.vue
 @ D:/VueJs/vue-devtools/node_modules/[email protected]@buble-loader??ref--0!D
:/VueJs/vue-devtools/node_modules/[email protected]@vue-loader/lib??vue-loader-
options!D:/VueJs/vue-devtools/src/devtools/views/vuex/VuexStateInspector.vue?vue
&type=script&lang=js&
 @ D:/VueJs/vue-devtools/src/devtools/views/vuex/VuexStateInspector.vue?vue&type
=script&lang=js&
 @ D:/VueJs/vue-devtools/src/devtools/views/vuex/VuexStateInspector.vue
 @ D:/VueJs/vue-devtools/node_modules/[email protected]@buble-loader??ref--0!D
:/VueJs/vue-devtools/node_modules/[email protected]@vue-loader/lib??vue-loader-
options!D:/VueJs/vue-devtools/src/devtools/views/vuex/VuexTab.vue?vue&type=scrip
t&lang=js&
 @ D:/VueJs/vue-devtools/src/devtools/views/vuex/VuexTab.vue?vue&type=script&lan
g=js&
 @ D:/VueJs/vue-devtools/src/devtools/views/vuex/VuexTab.vue
 @ D:/VueJs/vue-devtools/src/devtools/router.js
 @ D:/VueJs/vue-devtools/src/devtools/index.js
 @ ./src/devtools.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `cd shells/chrome && cross-env NODE_EN
V=production webpack --progress --hide-modules`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-03-17T1
4_26_16_300Z-debug.log

複制

新代碼用的webpack4，node版本至少大于6.11.5，有遇到如上類似錯誤的，要檢查你安裝的nodejs版本，最新版的devtools要求node版本至少大于6.11.5，解決方法就是重新安裝nodejs

安裝之後vue圖示不顯示

修改配置，改為TRUE，使vue插件在chrome裡可以看到

修改：vue-devtools\shells\chrome\manifest.json

Vue.js系列之入門手冊整理

如果devtools插件還是不起效，可以在vue-devtools\shells\chrome\webpack.config.js加上

if (process.env.NODE_ENV ==‘production’)

{

module.exports.plugins = [

‘process.env’:{

NODE_ENV:’“development”’

}

]

}

const path = require('path')
const createConfig = require('../createConfig')

module.exports = createConfig({
  entry: {
    hook: './src/hook.js',
    devtools: './src/devtools.js',
    background: './src/background.js',
    'devtools-background': './src/devtools-background.js',
    backend: './src/backend.js',
    proxy: './src/proxy.js',
    detector: './src/detector.js'
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].js'
  },
  devtool: process.env.NODE_ENV !== 'production'
    ? '#inline-source-map'
    : false
})
if (process.env.NODE_ENV =='production')
{
	module.exports.plugins = [
		'process.env':{
			NODE_ENV:'"development"'
		}	
	]
}

複制

上面問題解決了，就可以按f12調試了

Vue.js系列之入門手冊整理

第四章、定義頁面

建立一個Vue頁面需要兩個步驟：

  • 建立頁面
  • 定義路由

4.1、建立頁面

建立一個TestVue.vue命名的頁面

components/TestVue.vue

<template>
  <div >
    Hi Vue!
  </div>
</template>

<script>
export default {
  data () {
    return { }
  }
}
</script>

<style>
</style>

複制

4.2、定義路由

修改路由腳本，加上頁面路由資訊

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import TestVue from '@/components/TestVue'

Vue.use(Router)
export const constantRouterMap = [{
  path: '/',
  name: 'HelloWorld',
  component: HelloWorld
}, {
  path: '/TestVue',
  name: 'TestVue',
  component: TestVue
}]
export default new Router({
  routes: constantRouterMap
})

複制

通路頁面

http://localhost:8080/#/TestVue

附錄資料

VueJS教程：

  • VueJS Gitbook教程：http://vue_book.siwei.me/
  • VueJS官網手冊：https://cn.vuejs.org/v2/guide/
  • VueJS系列部落格：https://segmentfault.com/u/ihuangmx/articles?page=1
  • VueJS runoob教程：http://www.runoob.com/vue2/vue-tutorial.html
上一篇: Android系統名詞解釋彙總
下一篇: 2022年了，該學會用VSCode debug了前言簡介簡單調試功能介紹