1.安裝

使用之前先了解npm。

npm：Nodejs下的包管理器。

webpack:主要用途是通過commonJS的語法把所有瀏覽器需要發佈的靜態資源做相應的準備，比如資源的合併和打包。

vue-cli：用戶生成VUE工程模板。

node下載地址：https://nodejs.org/en/

node -v: 查看安裝版本

npm -v: 查看npm版本

安裝完成後使用淘寶npm鏡像，命令：

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

這樣就可以使用 cnpm 命令來安裝模塊了：

$ cnpm install [name]

升級npm：

cnpm install npm -g

升級或安裝 cnpm

npm install cnpm -g

在用 Vue.js 構建大型應用時推薦使用 NPM 安裝：

# 最新穩定版

$ cnpm install vue

# 全局安裝 vue-cli

$ cnpm install --global vue-cli

# 創建一個基於 webpack 模板的新項目

$ vue init webpack my-project

# 這裏需要進行一些配置，默認回車即可

$ cd my-project

$ cnpm install

$ cnpm run dev

在此，最簡單的項目就搭建成功啦。

訪問地址：http://localhost:8080

2.目錄結構說明

安裝完成後會生成以下目錄

build：項目構建（webpack）相關代碼。

config：配置目錄，包括端口號等，初學者可以使用默認。

node_modules: npm加載的項目依賴模塊。

src：這裏是我們要開發的目錄，基本上要做的事情都在這個目錄裏，裏面包含了幾個目錄及文件。

assets：防止一些圖片，如logo等。

components：目錄裏面放了一個組件文件，可以不用。

App.vue：項目入口文件，我們也可以直接將組件寫這裏，而不使用components目錄。

main.js：項目的核心文件。

static：靜態資源目錄，如圖片，字體等。

test：初始測試目錄

.xxx文件：這些都是一些配置文件，包括語法配置，git配置等。

index.html：輸液入口文件，你可以添加一些meta信息或統計代碼撒的。

package.json：項目配置文件。

README.md：項目說明文檔，markdown格式

3.vue+element-ui搭建基本框架

安裝element-ui

進入到項目路徑下執行命令：

cnpm i element-ui –S

在main.js中配置element-ui

import ElementUI from 'element-ui'

4. vue+element+admin

1.Github源文件下載地址：

git clone https://github.com/PanJiaChen/vue-element-admin

cd vue-element-admin

npm install

npm run dev

啓動後可查看基本樣式

作者同時也提供了一個空白的開發模板，上面是基礎的一些東西，想要用到哪個組件就拿過來直接用就行

https://github.com/PanJiaChen/vue-admin-template

2.項目搭建

a.創建一個項目後，登陸功能，需要先下載js-cookie，用來存儲cookie。

npm i js-cookie

b.安裝vuex，Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。

npm install vuex –save

c.安裝axios，是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特徵：

從瀏覽器中創建 XMLHttpRequest
從 node.js 發出 http 請求
支持 Promise API
攔截請求和響應
轉換請求和響應數據
取消請求
自動轉換JSON數據
客戶端支持防止 CSRF/XSRF

npm install axios --save
d.安裝Path-to-RegExp，官方解釋：

Turn a path string such as /user/:name into a regular expression.

安裝命令：npm install path-to-regexp –save

e.安裝core.js

npm install core-js@3

f.安裝Normalize.css

Normalize.css只是一個很小的css文件，但它在磨人的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比於傳統的CSS reset,Normalize.css是一種現代的、爲HTML5準備的優質替代方案。總之，Normalize.css是一種CSS reset的替代方案。

作用：

保護有用的瀏覽器樣式而不是去掉他們。
爲大部分HTML元素提供一般化的樣式
修復瀏覽器自身的bug並保證各瀏覽器的一致性。
優化css可用性
用註釋和詳細的文檔來解釋代碼
Normalize支持包括手機瀏覽器在內的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內容、表單和表哥都進行了一般化。儘管這個項目基於一般化的原則，但我們還是在合適的地方使用了更實用的默認值。

安裝：

npm install --save normalize.css

如果引入報錯，可能沒有安裝css-loader 和style-loader

npm install css-loader style-loader

g.安裝NProgress

作用：title部綠色進度條特效。

npm install --save nprogress

用法：

NProgress.start();

NProgress.done();

h.安裝mockjs

mock.js是模擬後端的數據，脫離後端獨立開發，實現增刪改查功能

npm install mockjs --save-dev

安裝sass的依賴包

npm install --save-dev sass-loader

卸載

j.安裝vue-router

npm install vue-router

k.安裝node-sess

npm install --save-dev sass-loader

//sass-loader依賴於node-sass

npm install --save-dev node-sass

L．安裝svg-sprite-loade圖標

npm install svg-sprite-loader

M.安裝script-ext-html-webpack-plugin

作用：這個插件可以幫助生成 HTML 文件，在 body 元素中，使用 script 來包含所有你的 webpack bundles。

npm install script-ext-html-webpack-plugin

N.安裝less依賴

npm install less less-loader --save

完成後還是會報錯"export 'default' (imported as 'pathToRegexp') was not found in 'path-to-regexp'；

解決辦法：
主要是 import 使用的問題：
在引入path-to-regexp時應使用以下的方法

import * as pathToRegexp from 'path-to-regexp'

O.安裝sass

npm install sass

P.安裝wave

作用: 點擊當前元素觸發水波紋效果

npm install --save-dev vue-comps-waves

注意：

下載下來的源代碼，根目錄下有.env文件

1．關於文件名：必須以如下方式命名，不要亂起名，也無需專門手動控制加載哪個文件。

.env 全局默認配置文件，不論什麼環境都會加載合併

.env.development 開發環境下的配置文件

.env.production 生產環境下的配置文件

2. 關於內容

　　注意：屬性名必須以VUE_APP_開頭，比如VUE_APP_XXX

3. 關於文件的加載：

　　根據啓動命令vue會自動加載對應的環境，vue是根據文件名進行加載的，所以上面說“不要亂起名，也無需專門控制加載哪個文件”

　　比如執行npm run serve命令，會自動加載.env.development文件

注意：.env文件無論是開發還是生成都會加載的公用文件　

如上圖所示，如過我們運行npm run serve 在就先加載.env文件，之後加載.env.development文件，兩個文件有同一個項，則，後加載的文件就會覆蓋掉第一個文件，也即是.env.development文件覆蓋掉了.env文件的NOOE_ENV選項。

　　同理如果npm run build 就執行了.env和.env.development。

`換成VUE3`

`安裝`

首先卸載vue2，不然我每次安裝完2，版本還是不變。

npm uninstall vue-cli -g

或

yarn global remove vue-cli

再次安裝：

npm install -g @vue/cli

或

yarn global add @vue/cli

`創建`

vue create test

創建完成後，執行npm install

啓動：npm run server

但我這邊無法啓動，需要改成npm run dev

將package.json中的server改爲dev在啓動。

Vue流程

首先會訪問/src/main.js文件。

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

render自定初始頁面，爲/src/App.vue文件。

剛創建的項目，會訪問HelloWorld

export default {   name: 'App'   components: {     HelloWorld   } }

可以註銷走自己的方法，如，你要走router文件夾下的index.js，將配置改爲如下：

<template>
   <div id="app">
     <router-view />

    <!--<img alt="Vue logo" src="./assets/logo.png">-->     <!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->   </div>
 </template>
 <script>

// import HelloWorld from './components/HelloWorld.vue' export default {   name: 'App'   // components: {   //   HelloWorld   // } } </script>



2.我初始頁面配置了dashboard頁面，在rounter/index.js中做如下配置：

export const constantRoutes = [   {     path: '/',     component: Layout,     redirect: '/dashboard',     children: [{       path: 'dashboard',       name: 'Dashboard',       component: () => import('@/views/dashboard/index'),       meta: { title: 'Dashboard', icon: 'dashboard' }     }]   } ]

component: Layout,應該是如果沒登錄就先跳轉登陸界面的意思

第三方包

vue-count-to

數字滾動效果

安裝：

npm install vue-count-to

安裝：

安裝echart：

圖表顯示

安裝：

npm install echarts –S

elementUI插件的使用

Drawer的使用

Drawer必須要寫在一個住的div中，不然會報錯Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

Drawer的title總是有個邊框，顯示的特別醜，加上下面這段代碼即可。

<style rel="stylesheet/scss" lang="less">
 :focus { outline: 0; } </style>

技術實踐

1.tabel中展開行，title在上面，而不在左邊的寫法。

在官網介紹中，只有顯示在左邊的寫法，加上type="expand"。

<el-table-column type="expand">

<el-form label-position="left" inline class="demo-table-expand">

<el-form-item label="商品名稱">

<span>{{ props.row.name }}</span>

</el-form-item>

<el-form-item label="所屬店鋪">

<span>{{ props.row.shop }}</span>

</el-form-item>

</el-form>

</template>

</el-table-column>

但有時候需要縱向顯示，就需要將代碼稍微修改下，需要設置el-form-item的寬度爲100%；

<el-table-column fixed type="expand">
     <template slot-scope="scope">
         <el-form label-position="left" inline class="demo-table-expand">
             <el-form-item class="hide-el">
                 <div style="width: 400px;">
                     <div class="hide-div">Key</div>
                     <div class="hide-div">Value</div>
                 </div>
             </el-form-item>
             <el-form-item  style="width: 100%;" v-for="parm in scope.row.parm_list">
                 <div style="width: 400px;">
                     <div class="hide-div-column">{{ parm.key }}</div>
                     <div class="hide-div-column">{{ parm.value }}</div>
                 </div>
             </el-form-item>
         </el-form>
     </template>
 </el-table-column>

el-form-item設置寬度。

在我們使用el-form-item這個標籤時候，默認的width爲70px，如果設置style的寬度是無效的，正確設置如下。

label-width="100px"

elementUI drawer數據顯示過多是顯示滾動條。

/*1.顯示滾動條：當內容超出容器的時候，可以拖動：*/ .el-drawer__body {     overflow: auto;     /* overflow-x: auto; */ } /*2.隱藏滾動條*/ .el-drawer__container ::-webkit-scrollbar{     display: none; }

VUE+elementUI+admin搭建

`換成VUE3`

`安裝`

`創建`

Vue流程

第三方包

elementUI插件的使用

技術實踐

Debian 系統初體驗

vue2數據雙向綁定Object.defineProperty

魔獸爭霸卡頓解決

BCS2024｜Baidu Comate：以研發提效爲驅動實現“安全左移”

Puppeteer實戰案例：自動化抓取社交媒體上的媒體資源

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結