06（H5*）Vue第五天、第六天 Vue常見命令

時間 2019-11-20

標籤 h5 vue 第五第六常見命令简体版

原文原文鏈接

常見的Vue命令

全局安裝

1：npm i webpack -g 　　　　　　　　全局安裝webpack。

保存到項目中 -S

2：npm i webpack --save-dev　　　　安裝到項目依賴中。

3：cnpm i jquery -S　　　　　　　　　　安裝jquery。

4: cnpm i bootstrap -S 　　　　　　　　安裝bootstrap

5: npm i vue -S　　　　　　　　　　　安裝 vue

開發是用到 -Dcss

4: 安裝 webpack-dev-server

cnpm i webpack-dev-server -D 來自動打包編譯，把bundle.js 放到內存中

cnpm i webpack -D

cnpm i webpack-cli -D

cnpm i webpack-dev-server webpack webpack-cli -D

5: 安裝 html-webpack-plugin 把html放到內存中

cnpm i html-webpack-plugin -D 把html放到內存中

6: 處理樣式文件

cnpm i style-loader css-loader -D 加載less文件

cnpm i less-loader less -D 　　　　處理less文件

cnpm i sass-loader node-sass -D　　cnpm i sass fibers -D　　　　　　處理scss文件

cnpm i sass-loader node-sass sass fibers -D

7：處理url路徑、圖片、字體庫

cnpm i url-loader file-loader -D

8：babel 解決高級語法

安裝babel插件html

1: 運行 cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D 轉換工具前端

2: 運行 cnpm i @babel/preset-env @babel/preset-stage-0 -D　　語法vue

3: 安裝可以識別轉換jsx語法的包 babel-preset-reactnode

　　　　運行 cnpm i @babel/preset-react -Dreact

4: 執行命令：cnpm i @babel/plugin-proposal-class-properties -Djquery

5: 執行命令：cnpm i @babel/runtime -Dwebpack

9: Vue組件

npm i vue-loader vue-template-compiler -Dgit

10: vue-routergithub

npm i vue-router -S

其餘命令

3：npm init -y　　　　　　　　　　　　建立package.json文件。

3：webpack ./src/main.js -o ./dist/bundle.js 把main.js處理成bundle.js文件

3：npm run dev　　運行項目

webpack-dev-server --open --port 3000 --contentBase src --hot

1：靜態資源

2：網頁中引入的靜態資源多了之後有什麼問題？？？

3：如何解決上述兩個問題

4：什麼是webpack?

5：如何完美實現上述的2種解決方案

6：webpack安裝的兩種方式

注意

1：在網頁中會引用哪些常見的靜態資源？

+ JS

- .js .jsx .coffee .ts（TypeScript 類 C# 語言）

+ CSS

- .css .less .sass .scss

+ Images

- .jpg .png .gif .bmp .svg

+ 字體文件（Fonts）

- .svg .ttf .eot .woff .woff2

+ 模板文件

- .ejs .jade .vue【這是在webpack中定義組件的方式，推薦這麼用】

2：網頁中引入的靜態資源多了之後有什麼問題？？？

1. 網頁加載速度慢，由於咱們要發起不少的二次請求；

2. 要處理錯綜複雜的依賴關係

3：如何解決上述兩個問題

1. 合併、壓縮、精靈圖、圖片的Base64編碼

2. 可使用以前學過的requireJS、也可使用webpack能夠解決各個包之間的複雜依賴關係；

4：什麼是webpack?

webpack 是前端的一個項目構建工具，它是基於 Node.js 開發出來的一個前端工具；

// 通過剛纔的演示，Webpack 能夠作什麼事情？？？

// 1. webpack 可以處理 JS 文件的互相依賴關係；

// 2. webpack 可以處理JS的兼容問題，把高級的、瀏覽器不是別的語法，轉爲低級的，瀏覽器能正常識別的語法

// 剛纔運行的命令格式： webpack 要打包的文件的路徑打包好的輸出文件的路徑

5：如何完美實現上述的2種解決方案

1. 使用Gulp，是基於 task 任務的；

2. 使用Webpack，是基於整個項目進行構建的；

+ 藉助於webpack這個前端自動化構建工具，能夠完美實現資源的合併、打包、壓縮、混淆等諸多功能。

+ 根據官網的圖片介紹webpack打包的過程

+ [webpack官網](http://webpack.github.io/)

6：webpack安裝的兩種方式

1. 運行`npm i webpack -g`全局安裝webpack，這樣就能在全局使用webpack的命令

2. 在項目根目錄中運行`npm i webpack --save-dev`安裝到項目依賴中

7：建立你一個webpack工程

1：用npm init -y 建立package.json 配置工程,拿到項目的第一步驟是用包管理工具管理起來。npm

2：建立src和dist目錄

3：在src文件夾下面。建立js文件夾、css文件夾、images文件夾、建立index.html、main.js、index.js

4：添加mode到script標籤中（package.json文件中）

"dev":"webpack --mode development",

"bulid":"webapck --mode production"

5：npm run dev 此時加載的bundle.js是在本地中

　　　可使用 webpack ./src/main.js -o　./dist/bundle.js ，可是報黃色的警告，因此：用 npm run dev來解決

npm run 其實執行了package.json中的script腳本

6: 配置入口和出口函數，

　　直接寫webpack就能夠打包。

const path = require('path')

// 向外暴露一個配置對象

module.exports = {

// 1:入口，表示要使用webpack 打包哪一個文件。

entry: path.join(__dirname, './src/main.js'),

output : {

// 2：輸出文件的相關配置

path: path.join(__dirname, './dist'), // 指定打包好的文件的目標

filename: 'bundle.js' // 指定文件的名字

}

7:使用webpack-dev-server這個工具來自動打包編譯的功能

//1.運行cnpm i webpack-dev-server -D 來自動打包編譯

//2: webpack-dev-server 依賴webpack包，因此須要一塊兒安裝。

cnpm i webpack -D

cnpm i webpack-cli -D

cnpm i webpack-dev-server webpack webpack-cli -D

2: webpack-dev-server --open --port 3000 --contentBase src

修改完，package.json以後，須要從新運行

--open，自動打開遊覽器

--port 修改端口號

--contentBase src 修改根路徑

此時：bundle.js是在內存中，html在物理磁盤中

8：html-webpack-plugin 把html放到內存中

能夠自動建立一個script標籤，自動把打包好的 bundle.js 追加到頁面中去

cnpm i html-webpack-plugin -D

9: 處理樣式文件

cnpm i style-loader css-loader -D 處理css文件

cnpm i less-loader less -D 　　　　處理less文件

cnpm i sass-loader node-sass -D　　cnpm i sass fibers -D　　　　　　處理scss文件

cnpm i sass-loader node-sass sass fibers -D

10：處理url路徑、圖片、字體庫

cnpm i url-loader file-loader -D

11:安裝babel

// 經過 Babel ，能夠幫咱們將高級的語法轉換爲低級的語法

// 1. 在 webpack 中，能夠運行以下兩套命令，安裝兩套包，去安裝 Babel 相關的loader功能：

// 1.1 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

cnpm i @babel/core -D

// 1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D

// 2. 打開 webpack 的配置文件，在 module 節點下的 rules 數組中，添加一個新的匹配規則：

// 2.1 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }

// 2.2 注意：在配置 babel 的 loader規則的時候，必須把 node_modules 目錄，經過 exclude 選項排除掉：緣由有倆：

// 2.2.1 若是不排除 node_modules，則Babel 會把 node_modules 中全部的第三方 JS 文件，都打包編譯，這樣，會很是消耗CPU，同時，打包速度很是慢；

// 2.2.2 哪怕，最終，Babel 把全部 node_modules 中的JS轉換完畢了，可是，項目也沒法正常運行！

// 3. 在項目的根目錄中，新建一個叫作 .babelrc 的Babel 配置文件，這個配置文件，屬於JSON格式，因此，在寫 .babelrc 配置的時候，必須符合JSON語法規範：不能寫註釋，字符串必須用雙引號

// 3.1 在 .babelrc 寫以下的配置：你們能夠把 preset 翻譯成【語法】的意思

{

"presets": ["env", "stage-0"],

"plugins": ["transform-runtime"]

}

// 4. 瞭解：目前，咱們安裝的 babel-preset-env, 是比較新的ES語法，以前，咱們安裝的是 babel-preset-es2015, 如今，出了一個更新的語法插件，叫作 babel-preset-env ，它包含了全部的和 es***相關的語法

/********************/

上面的作法是 Babel^6x 版本的使用方法，babel在2018年9月份升級了一個大的版本 Babel 7.x，語法有了很大的變更，因此我上面運行的指令已經被out了，必須使用新語法，以下：
新命令以下適合 Babel 7.x和webpack 4 搭配：

安裝babel插件
- 　　運行 cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D 轉換工具
- 　　運行 cnpm i @babel/preset-env @babel/preset-stage-0 -D　　語法
安裝可以識別轉換jsx語法的包 babel-preset-react
- 　　運行 cnpm i @babel/preset-react -D
執行命令：cnpm i @babel/plugin-proposal-class-properties -D
執行命令：cnpm i @babel/runtime -D
添加 .babelrc 配置文件：

{

"presets": ["@babel/preset-env","@babel/preset-react"],

"plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]

}

最後在 webpack.config.js 中配置上：

{ test:/\.js$/, use: 'babel-loader', exclude: /node_modules/ } //配置 babel 轉化ES6 語法

/********************/

12：安裝vue

1: npm i vue -S

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解決辦法：

// 在webpack 中嘗試使用 Vue：

// 注意：在 webpack 中，使用 import Vue from 'vue' 導入的 Vue 構造函數，功能不完整，只提供了 runtime-only 的方式，並無提供像網頁中那樣的使用方式；

咱們用script標籤導入的vue是全新的版本。

解決辦法：

1：修改引用規則。

import Vue from '../node_modules/vue/dist/vue.js'

// 回顧包的查找規則：

// 1. 找項目根目錄中有沒有 node_modules 的文件夾

// 2. 在 node_modules 中根據包名，找對應的 vue 文件夾

// 3. 在 vue 文件夾中，找一個叫作 package.json 的包配置文件

// 4. 在 package.json 文件中，查找一個 main 屬性【main屬性指定了這個包在被加載時候，的入口文件】

2：直接修改 main 屬性

3：導入vue，在webpack.config.js中修改引用指向

2：npm i vue-loader vue-template-compiler -D

3：vue-loader把vue文件中的template script stype文件統一成最終的模板。最後給組件用。

13：路由

npm i vue-router -S

1：導包：

import VueRouter from 'vue-router'

2：綁定路由對象

Vue.use(VueRouter);

3：建立路由對象

var router = new VueRouter({

routes: [

{path: '/account', component: account},

{path: '/goodslist', component:goodslist}

});

4：掛在路由實例中

5：顯示在界面中

<router-link to="/account">Account</router-link>

<router-link to="/goodslist">Goodslist</router-link>

<router-view></router-view>

8: 向外暴露成員

// 這是 Node 中向外暴露成員的形式：

// module.exports = {}

// 在 ES6中，也經過規範的形式，規定了 ES6 中如何導入和導出模塊

// ES6中導入模塊，使用 import 模塊名稱 from '模塊標識符' import '表示路徑'

// 在 ES6 中，使用 export default 和 export 向外暴露成員：

var info = {

name: 'zs',

age: 20

}

export default info

/* export default {

address: '北京'

} */

// 注意： export default 向外暴露的成員，可使用任意的變量來接收

// 注意：在一個模塊中，export default 只容許向外暴露1次

// 注意：在一個模塊中，能夠同時使用 export default 和 export 向外暴露成員

export default：至關於對象

export:至關於屬性。因此用對象接受。

export var title = '小星星'

export var content = '哈哈哈'

// 注意：使用 export 向外暴露的成員，只能使用 { } 的形式來接收，這種形式，叫作【按需導出】

// 注意： export 能夠向外暴露多個成員，同時，若是某些成員，咱們在 import 的時候，不須要，則能夠不在 {} 中定義

// 注意：使用 export 導出的成員，必須嚴格按照導出時候的名稱，來使用 {} 按需接收；

// 注意：使用 export 導出的成員，若是就想換個名稱來接收，可使用 as 來起別名；

// 在Node中使用 var 名稱 = require('模塊標識符')

// module.exports 和 exports 來暴露成員

注意：

1：main.js不支持

import $ from 'jquery'

2: webpack ./src/main.js ./dist/bundle.js

　　這個時候導入的是物理磁盤上的bundle.js

2.2:配置入口函數和出口函數，還有mode。這個時候使用webpack命令，導入的仍是bundle.js

2.3:使用webpack-dev-server 這個工具導入的是webpack-dev-server生成在根路徑中的bundle.js是在內存中。

// 使用 webpack-dev-server 這個工具，來實現自動打包編譯的功能

// 1. 運行 npm i webpack-dev-server -D 把這個工具安裝到項目的本地開發依賴

// 2. 安裝完畢後，這個工具的用法，和 webpack 命令的用法，徹底同樣

// 3. 因爲，咱們是在項目中，本地安裝的 webpack-dev-server ，因此，沒法把它看成腳本命令，在powershell 終端中直接運行；（只有那些安裝到全局 -g 的工具，才能在終端中正常執行）

// 4. 注意： webpack-dev-server 這個工具，若是想要正常運行，要求，在本地項目中，必須安裝 webpack webpack-cli

// 5. webpack-dev-server 幫咱們打包生成的 bundle.js 文件，並無存放到實際的物理磁盤上；而是，直接託管到了電腦的內存中，因此，咱們在項目根目錄中，根本找不到這個打包好的 bundle.js;

// 6. 咱們能夠認爲， webpack-dev-server 把打包好的文件，以一種虛擬的形式，託管到了我們項目的根目錄中，雖然咱們看不到它，可是，能夠認爲，和 dist src node_modules 平級，有一個看不見的文件，叫作 bundle.js

// 這裏簡單說一下安裝命令的簡寫和規範
// i => install
// -D => --save-dev
// -S => --save
// -S 會安裝到 dependencies 屬性下
// -D 安裝到 devDependencies 屬性下
// 規範是，-S 安裝項目中會用到的代碼，例如 vue、react、lodash 等
// -D 安裝構建代碼，不會在項目代碼中使用，例如 webpack、css-loader 等

3:　　render和路由

var vm = new Vue({

el : '#app',

render: c => c(app),

router

});

// 注意：App這個組件是經過 VM的實例對象的 render函數渲染出來的。render 函數若是要渲染組件，渲染出來的組件，只可以放到 el: '#app' 所指定的元素中

// account和goodslist組件，是經過路由匹配監聽到的，因此，這兩個組件，只能站到到屬於路由的 router-view></router-view> 中去，

webpack.config.js模板

const path = require('path')

// 啓用熱更新的第2步驟

const webpack = require('webpack')

// 導入在內存中生成 HTML 頁面的插件

// 只要是插件，都必定要放到 plugins 節點中去

// 這個插件的兩個做用：

// 1. 自動在內存中根據指定頁面生成一個內存的頁面

// 2. 自動，把打包好的 bundle.js 追加到頁面中去

const htmlWebpackPlugin = require('html-webpack-plugin')

const { VueLoaderPlugin } = require('vue-loader');

// 經過node的模塊操做，向外暴露一個配置對象

// 當咱們在控制檯，直接輸入 webpack 命令執行的時候，webpack 作了如下幾步：

// 1. 首先，webpack 發現，咱們並無經過命令的形式，給它指定入口和出口

// 2. webpack 就會去項目的根目錄中，查找一個叫作 `webpack.config.js` 的配置文件

// 3. 當找到配置文件後，webpack 會去解析執行這個配置文件，當解析執行完配置文件後，就獲得了配置文件中，導出的配置對象

// 4. 當 webpack 拿到配置對象後，就拿到了配置對象中，指定的入口和出口，而後進行打包構建；

module.exports = {

mode: 'development',

// 1:入口，表示要使用webpack 打包哪一個文件。

entry: path.join(__dirname, './src/main.js'),

// 2：輸出文件的相關配置

output : {

// 指定打包好的文件的目標

path: path.join(__dirname, './dist'),

// 指定文件的名字

filename: 'bundle.js'

// 3:這是配置 webpack-dev-server 參數的第二種方式，相對麻煩

devServer: {

open: true, // 自動打開遊覽器

port: 3000, // 設置端口號

contentBase: 'src', // 指定託管的根目錄

hot: true, // 設置熱更新啓用熱更新的第1步

// 4:插件--配置插件的節點

plugins: [

// 1: new 一個熱更新的對象，這是啓用熱更新的第3步驟

new webpack.HotModuleReplacementPlugin(),

// 2: 建立一個在內存中生成 HTML文件頁面的插件對象，能夠自動建立一個script標籤，自動把打包好的 bundle.js 追加到頁面中去

new htmlWebpackPlugin({

// 指定模板頁面，未來會根據指定的頁面路徑，去生成內存中的頁面

template: path.join(__dirname, './src/index.html'),

// 指定生成的頁面的名稱

filename: 'index.html'

}),

// 3:

new VueLoaderPlugin(),

// 5: 這個節點，用於配置全部第三方模塊加載器

module: {

// 全部第三方模塊的匹配規則

rules: [

// 1:配置處理 .css 文件的第三方loader 規則

{ test: /\.css$/, use: ['style-loader', 'css-loader'] },

// 2: 配置處理 .less 文件的第三方 loader 規則

// { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

// 3：配置處理 .scss 文件的第三方 loader 規則

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },

// 4: 處理圖片路徑的 loader

// limit 給定的值，是圖片的大小，單位是 byte，若是咱們引用的圖片，大於或等於給定的 limit值，則不會被轉爲base64格式的字符串，若是圖片小於給定的 limit 值，則會被轉爲 base64的字符串

// name指向原來的名字

{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]'},

// 5: 處理字體文件的 loader

{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },

// 6: 配置 Babel 來轉換高級的ES語法

{ test:/\.js$/, use: 'babel-loader', exclude: /node_modules/ } ,

// 7: 處理 .vue 文件的 loader

{ test: /\.vue$/, use: 'vue-loader' }

]

resolve: {

alias: { // 修改 Vue 被導入時候的包的路徑

"vue$": "vue/dist/vue.js"

}

package.json中script標籤配置模板

{

"name": "webpack-study",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot",

"dev": "webpack-dev-server",

"bulid": "webapck --mode production"

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"@babel/core": "^7.6.2",

"@babel/plugin-proposal-class-properties": "^7.5.5",

"@babel/plugin-transform-runtime": "^7.6.2",

"@babel/preset-env": "^7.6.2",

"@babel/preset-react": "^7.0.0",

"@babel/preset-stage-0": "^7.0.0",

"@babel/runtime": "^7.6.2",

"babel-eslint": "^10.0.3",

"babel-loader": "^8.0.6",

"css-loader": "^3.2.0",

"eslint": "^6.4.0",

"fibers": "^4.0.1",

"file-loader": "^4.2.0",

"html-webpack-plugin": "^3.2.0",

"less": "^3.10.3",

"less-loader": "^5.0.0",

"node-sass": "^4.12.0",

"sass": "^1.22.12",

"sass-loader": "^8.0.0",

"style-loader": "^1.0.0",

"url-loader": "^2.1.0",

"vue-loader": "^15.7.1",

"vue-template-compiler": "^2.6.10",

"webpack": "^4.40.2",

"webpack-cli": "^3.3.9",

"webpack-dev-server": "^3.8.1"

"dependencies": {

"bootstrap": "^4.3.1",

"jquery": "^3.4.1",

"popper": "^1.0.1",

"vue": "^2.6.10"

}

.babelrc 配置

{

"presets": ["@babel/preset-env", "@babel/preset-react"],

"plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]

}

相關標籤/搜索

每日一句

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

06（H5*）Vue第五天、第六天 Vue常見命令

常見的Vue命令

全局安裝

保存到項目中 -S

其餘命令

注意

1：在網頁中會引用哪些常見的靜態資源？

2：網頁中引入的靜態資源多了之後有什麼問題？？？

3：如何解決上述兩個問題

4： 什麼是webpack?

5：如何完美實現上述的2種解決方案

6：webpack安裝的兩種方式

7：建立你一個webpack工程

7:使用webpack-dev-server這個工具來自動打包編譯的功能

8：html-webpack-plugin 把html放到內存中

9: 處理樣式文件

10：處理url路徑、圖片、字體庫

11:安裝babel

最後在 webpack.config.js 中配置上：

12：安裝vue

1: npm i vue -S

13：路由

8: 向外暴露成員

注意：

webpack.config.js模板

package.json中script標籤配置模板

.babelrc 配置

4：什麼是webpack?