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

文章目錄

第一章、環(huán)境搭建

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、創(chuàng)建頁面

4.2、定義路由

附錄資料

第一章、環(huán)境搭建

npm: 6.9.0 (npm > 3.0)

node: v10.15.3 (node > 6.11.5)

vue: 2.0+

window系統(tǒng)可以直接去官網(wǎng)下載：https://nodejs.org/en/

查看npm版本

npm -v

1

升級npm

cnpm install npm -g

1

升級或安裝cnpm

npm install cnpm -g

1

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

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

1

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

cnpm install vue vue-cli -g

1

運行vue

創(chuàng)建一個基于 webpack 模板的新項目my-project:

vue init webpack my-project

1

安裝依賴

cd my-project cnpm install

1

2

以默認端口來運行：

npm run dev

1

安裝成功之后，訪問：

http://localhost:8080

第二章、目錄結構

webpack簡介，webpack是一個前端資源加載/打包工具，將各種js/css/html代碼最后打包編譯到一起。vuejs已經(jīng)集成

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

1

2

3

4

5

6

7

8

9

10

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

開發(fā)模式的基礎配置文件，不能隨意修改

webpack.prod.conf.js

生產(chǎn)模式的基礎配置文件，不能隨意修改

config

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

1

2

3

4

index.js

定義了 開發(fā)時的端口（默認是8080），定義了圖片文件夾（默認static)， 定義了開發(fā)模式下的 代理服務器

dev.env.js

開發(fā)環(huán)境模式的配置文件

prod.env.js

生產(chǎn)環(huán)境模式的配置文件

dist

打包之后的文件所在目錄

node_modules

node項目需要的第三方庫

src

源代碼的文件夾

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

1

2

3

4

5

6

7

8

9

assets: 存放圖片的文件夾

components: 用到的"視圖"和"組件"所在的文件夾。

router/index.js 路由文件。 定義了各個頁面對應的url.

App.vue 如果index.html 是一級頁面模板的話，這個App.vue就是二級頁面模板。 所有的其他vuejs頁面，都作為該模板的 一部分被渲染出來。

main.js 廢代碼。沒有實際意義，但是為了支撐整個vuejs框架，存在很必要。

第三章、Vue調試

VueJs有提供調試Vue devtools工程，集成到Chrome插件

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

1

在vue-devtools文件夾安裝cnpm支持

cd vue-devtools //跳轉到vue-devtools文件夾 cnpm install //安裝cnpm環(huán)境支持，也可以npm install

1

2

npm run build

1

編譯成功之后，就選擇chrome的添加拓展程序，選擇開發(fā)者模式，選擇vue-devtools\shells\chrome文件夾，就可以將編譯好的chrome插件引到chrome里

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

npm run build報錯

編譯devtools工程出現(xiàn)報錯：

... @ 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\_logs19-03-17T1 4_26_16_300Z-debug.log

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

新代碼用的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"' } ] }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

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

第四章、定義頁面

創(chuàng)建一個Vue頁面需要兩個步驟：

創(chuàng)建頁面

定義路由

創(chuàng)建一個TestVue.vue命名的頁面

components/TestVue.vue

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

修改路由腳本，加上頁面路由信息

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 })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

訪問頁面

http://localhost:8080/#/TestVue

附錄資料

VueJS教程：

VueJS Gitbook教程：http://vue_book.siwei.me/

VueJS官網(wǎng)手冊：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

JavaScript Node.js Vue

版權聲明：本文內容由網(wǎng)絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內刪除侵權內容。

版權聲明：本文內容由網(wǎng)絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內刪除侵權內容。