碼上快樂

相關內容    簡體    繁體

Vue入門手冊整理

本文轉載自   查看原文   2019-03-18 22:20   1322    前端

目錄

第一章、環境搭建

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

在這里插入圖片描述

第二章、目錄結構

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/_buble-loader@0.5.1@buble-loader??ref--0!D
:/VueJs/vue-devtools/node_modules/_vue-loader@15.7.0@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/_buble-loader@0.5.1@buble-loader??ref--0!D
:/VueJs/vue-devtools/node_modules/_vue-loader@15.7.0@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! vue-devtools@5.0.0-beta.4 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 vue-devtools@5.0.0-beta.4 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

在這里插入圖片描述

如果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頁面需要兩個步驟：

  • 創建頁面
  • 定義路由

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教程：


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Masscan入門手冊 RocketMQ入門手冊 MySQL入門手冊 Mysql學習筆記整理手冊 MyBean 框架入門手冊<感謝[青銅]整理的如此細致和系統> Masscan教程和入門手冊 Activiti7入門手冊 NSubstitute完全手冊（一）入門基礎 DPDK17.02入門手冊 TypeScript中文手冊【從入門到精通】
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM