1. 程式人生 > >Vue.js + Element.ui 從搭建環境到打包部署

Vue.js + Element.ui 從搭建環境到打包部署

  • 一、搭建環境

    • 新的node已經集成了npm,所以直接安裝node;
    • 命令列用 npm -v ,node -v 檢視是否安裝成功以及版本號 ,如果沒有要先安裝
    • 升級到最新版本方法(看需求升級版本):命令列 npm install [email protected]
    • 全域性安裝vue-cli,開啟CMD命令列:npm install -g vue-cli
    • 在D盤或者其他盤新建專案,cmd=>>執行 vue init webpack demo,demo是你專案的名字,會有一些初始化的設定,其中vue-router是路由這裡寫圖片描述
    • 按照提示,cmd到新建的專案下,執行npm install
    • 執行 npm run dev
    • 這裡寫圖片描述
    • 埠被佔用情況下(修改埠):不出意外的話可以在瀏覽器裡面看到Vue的初始化模板了,如果沒有可能是埠號被佔用,這裡就將配置檔案config/index.js裡面的埠號改掉就可以了
    • 補充一下,最後的打包如果在本地起伺服器執行打包後的檔案是無法執行的,會報錯404,所以這裡將assetsPublicPath裡面的 “/”改成”./”,截圖裡面沒有改
      這裡寫圖片描述
      這裡寫圖片描述

相關推薦

Vue.js + Element.ui 搭建環境打包部署

一、搭建環境 新的node已經集成了npm,所以直接安裝node; 命令列用 npm -v ,node -v 檢視是否安裝成功以及版本號 ,如果沒有要先安裝 升級到最新版本方法(看需求升級版本):

Vue.js+Element UI環境搭建

一、搭建環境 由於新的node已經集成了npm,所以直接安裝node,前往node官網下載最新版本的node,根據自己的作業系統選擇相應的包,按照步驟一步步走就可以,這裡不做過多介紹。 安裝好後可以開啟命令列用  npm-v   node-v 檢視是否安裝成功以及版本號

關於 Vue.js+Element-UI 日期控件 日期範圍選擇

alt logs 插件 code after ast () details cxf 理想效果 : 也就是說前面時間框的時間能選的範圍應該小於等於後面的時間框; 後面時間框能選的範圍應該大於等於前面的時間框; 示例代碼 : 頁面: <el-form-item

(vue.js)element ui 表單重置

pro too DG cef service widget 一個 方法 model el-form需要接收一個model,並且需要配合el-form-item一起使用,並且在el-form-item上綁定prop屬性,resetField方法才能好使。 <el-

使用 vue-cli + element-ui 快速搭建專案

① 使用 git 命令git clone https://github.com/ElementUI/element-starter.git下載官方提供的模板  (本地電腦沒有安裝 git 的可以進入 https://github.com/ElementUI/element-s

vue.js + element UI實現表格、列表的拖動 推拽效果

表格、列表的拖動、拖拽效果 在開發使用vue.js、elementUI開發專案時,客戶提出將表格中的內容可隨意拖動實現排序功能。 於是專案中採用sortablejs來實現該功能。 1.引入sortablejs $ npm install sortablejs --save

Django+vue.js+element-ui 開發一

工具: pycharm,mysql,django,vue.js 安裝步驟: pycharm官網下載安裝,然後百度破解辦法,網上有多 MySQL安裝搭載navicat,百度 django安裝百度: pip install django==1.8.6 建立djang

Vue.js(一) Vue.js + element-ui 掃盲

我之前寫前端的時候就三個技術(html、js、css),現在的前端技術一般使用vue.js+element-ui, 一個後端程式設計師感覺再看現在的前端完全看不懂,js語法也不認識了,css語法也不認識了,html中也出現了不認識的標籤。為了弄懂現在的前端是怎麼玩的就研究了一下,

vue.js入門學習(搭建環境和測試demo)

     什麼是vue.js?這是官網的解釋。     Vue.js(讀音 /vjuː/,類似於 view) 是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是,Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層,它不僅易於上手,還便於與第三方庫或

Nuxt.js + Vue.js + Element-ui

Nuxt.js是一個基於Vue.js的服務端渲染應用框架 Nuxt.js官方提供了一個模板,可以使用vue-cli直接安裝 $ vue init nuxt-community/starter-template <project-name> 但是前提是你已經安

vue.js+element-ui動態配置選單

<!--導航選單-摺疊功能--> <aside :class="collapsed?‘menu-collapsed‘:‘menu-expanded‘"> <!--單個啟用 並以 index 作為 path 進行路由跳轉--> <el

Vue.js框架--Ui框架的Element UI 按需引入(二十五)

主要操作技能:  1>去官網檢視http://element-cn.eleme.io/2.4/#/zh-CN/component/quickstart  藉助 babel-plugin-component,我們可以只引入需要的元件,以達到減小專案體積的目的

Vue.js框架--Ui框架的Element UI(二十四)

主要操作技能:    1>去官網檢視http://element-cn.eleme.io/2.4/#/zh-CN/component/quickstart      2>安裝:  cnpm i element-u

一步步教你搭建一個完整的前端專案(基於vueelement-ui、webpack)

準備工作 需要先安裝node環境,官方地址:https://nodejs.org 開始搭建 Windows下不要使用git自帶的mintty執行命令,切換選項時會失效的。覺得cmd難看的話用PowerShell會好一些,只是好一些,呵呵。 安裝vue npm instal

vue使用element-ui的el-input監聽不了鍵盤事件解決

運行 string 封裝 應該 login ring 執行 -i 隱藏 vue使用element-ui的el-input監聽不了鍵盤事件,原因應該是element-ui自身封裝了一層div在input標簽外面,把原來的事件隱藏了,所以如下代碼運行是無響應的: <el-

VUEelement-ui的使用

out default 使用 efault com clas temp 引入 sco 我們在自己的網站當中有的時候會用到element-ui的組建 1.如何安裝element-ui的組件 在命令行工具當中輸入cnpm i element-ui -S, 等待安裝 2.如

Element UI 框架搭建

提示 效果 sim 教訓 reg sha group -c cli Element UI 框架搭建 1、webpack 全局安裝 npm install -g webpack 2、淘寶鏡像cnpm安裝 npm install -g cnpm --re

vue引入element-ui不生效

沖突 tools bsp rap 元素 bootstrap 根據 決定 去掉 為了同樣的錯誤不再犯第三次,我決定用文字記錄, 在寫vue項目時 最初需要用到 dev-tools 所以根據要求需要引入vue.js 我使用的是bootstrap的cdn 然後後來需要使用elem

Vue結合Element-UI實現多級選單導航欄

在需要加入導航欄的元件內新增麵包屑導航欄,構建出一個可以根據路由動態改變其值的資料變數 { levelList },迴圈levelList,為每一個item設定點選時的跳轉路由 <el-breadcrumb class = "app-breadcrumb" separator =

vue+springBoot element-ui upload元件

之前看過有人用beforeUpload 上傳檔案,用action不行,因為專案是前後端分離的,無法攜帶token,我研究了下一最終除錯通了。 <el-upload drag multiple name="multipartfiles" //後臺接收檔案流的引數名 ref="up