1. 程式人生 > >Vue爬坑之路 一:簡單介紹vue及使用vue-cli腳手架工具快速搭建專案

Vue爬坑之路 一:簡單介紹vue及使用vue-cli腳手架工具快速搭建專案

關於Vue.js
Vue.js是最近特別火的一個前端MVVM框架,類似於Angular,但更容易上手,而且因為作者是中國人的原因,所以Vue.js的中文文件比較齊全,很多的問題都能在官網文件中得到解決!

使用cnpm安裝Vue.js
首先得下載一下npm,下載過node.js的就不用下載,沒有下載的朋友可以下載一下node.js裡面有集成了npm,最好到相應的目錄下開啟命令提示符 shift+滑鼠右鍵選擇在此處開啟命令符,也可以直接先開啟npm切換到對應的目錄下,因為npm是外國的速度比較慢,所以還是切換回淘寶的cnpm,輸入下面程式碼安裝下cnpm:

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

安裝完成後升級一下cnpm

cnpm install cnpm -g

升級完成後就可以直接使用cnpm安裝vue,js

cnpm install vue

安裝vue之後,在安裝一下腳手架工具vue-cli

cnpm install --global vue-cli

接下來就可以使用vue-cli快速建立專案,這時候你可以先選擇一下你的專案的存放目錄 切換目錄命令cd,之後輸入vue的搭建命令:

vue init webpack "專案名稱"

這裡寫圖片描述

輸完專案後會出現一堆選項具體代表的意思是:
1:專案名稱 只支援小寫‘
2:專案描述 預設亦可
3:作者名稱
4’:使用什麼模式,預設就行
5:是否安裝路由管理 是
6 :是否使用ESLint 使用的話比較規範,我這裡選擇不使用
7、8:是否需要測試 看個人需要

檢視是否成功安裝,切換到專案目錄:
cd E:\程式設計文件\new-novel 更改成自己的專案目錄,輸入命令(第一個命令安裝依賴項):

cnpm install 
npm run dev

這裡寫圖片描述
看到我的埠是8081,因為我有8080埠被佔用了,預設的埠是8080,輸入網址後看到下面的介面證明搭建完成
這裡寫圖片描述

到這裡就搭建完成,下一篇文章在來介紹一下大概的目錄結構以及做一個基本的登入介面,用上我之前寫的一個登入介面.Net WebApi入門簡單基礎認識(自動生成api文件和簡單測試)

相關推薦

Vue 簡單介紹vue使用vue-cli腳手架工具快速搭建專案

關於Vue.js Vue.js是最近特別火的一個前端MVVM框架,類似於Angular,但更容易上手,而且因為作者是中國人的原因,所以Vue.js的中文文件比較齊全,很多的問題都能在官網文件中得到解決! 使用cnpm安裝Vue.js 首先得下載一下np

Vue使用Muse-UI前端框架axios,實現簡單登入頁

一:安裝UI元件 Muse UI 基於 Vue2.0 開發,Vue2.0是當下最快的前端框架之一,小巧,api友好,可用於開發的複雜單頁應用,安裝的方式有很多種,官方推薦的是使用npm輔助安裝: 在專案的根目錄中開啟命令提示符輸入: npm

Vue )—— 使用 vue-cli 搭建項目 (增補)

web http class 模板 clas ebp 搭建 com png cd 指定好安裝目錄 vue init webpack 項目名稱 執行 vue vue list 查看可應用模板 vue init webpack +名字

Vue )—— 使用 vue-cli 搭建項目

wrong run 自己 文件的 ima tca 來安 mage 前綴 vue-cli 是一個官方發布 vue.js 項目腳手架,使用 vue-cli 可以快速創建 vue 項目,GitHub地址是:https://github.com/vuejs/vue-cli 一、

專案實戰vuevue框架中如何註冊全域性公共過濾器filter、全域性公共外掛、全域性公共元件component

專案需求: 在我們的實際專案的開發中,經常會遇到一些可以重複利用的方法和元件,比如:我們在一個專案中可能會經常用到格式化時間的方法。這個時候就需要我們把這個方法封裝起來,註冊成一個全域性的過濾器,在整個專案中都可以使用,這樣既可以提高程式碼的使用效率,也便於我們

vue+ele ()—class

上手Vue已將近三月,在這裡記錄下我自己遇到的一些問題吧! class名的修改 1、第一種就是直接繫結 <div class="main-header"></div> 這種樣式方便大家直接給標籤加樣式,不足之處在於無法動態控制class 2、動

Vue )—— 使用 vue-cli 搭建專案

vue-cli 是一個官方釋出 vue.js 專案腳手架,使用 vue-cli 可以快速建立 vue 專案,GitHub地址是:https://github.com/vuejs/vue-cli 一、 安裝 node.js 首先需要安裝node環境,可以

Vue (四)—— 與 Vuex 的第一次接觸

參數 之間 scrip span 變量 tle 技術分享 管理 tool 在 Vue.js 的項目中,如果項目結構簡單, 父子組件之間的數據傳遞可以使用 props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660

Vue (二)—— 組件之間的數據傳遞

組件 圖片 NPU tar bubuko 9.png com clas entry Vue 的組件作用域都是孤立的,不允許在子組件的模板內直接引用父組件的數據。必須使用特定的方法才能實現組件之間的數據傳遞。 首先用 vue-cli 創建一個項目,其中 App.vue 是父組

Vue (三)—— 使用 vue-router 跳轉頁面

cli 分類 ace local outer log 適合 創建 start 使用 Vue.js 做項目的時候,一個頁面是由多個組件構成的,所以在跳轉頁面的時候,並不適合用傳統的 href,於是 vue-router 應運而生。 官方文檔: https://router.v

Vue (十二)—— vue-cli 3.x 搭建項目

cas sas 環境變量 npm pack 全局 開發模式 文件 預編譯 Vue Cli 3 官方文檔:https://cli.vuejs.org/zh/guide/ 一、安裝 @vue/cli 更新到 3.x 之後,vue-cli 的包名從 vue-cli 改

java()——編譯可以正常編譯,執行時報unsupported major.minor version 52.0

寫了一個很簡單的helloworld,編譯可以正常編譯,執行時報unsupported major.minor version 52.0錯誤。 java程式碼如下: 用javac Hello.java命令編譯時,是沒有問題的,用java Hello執行時,怎麼也執行不了 後

Vue vue-cli 3.x 搭建專案

一、安裝 @vue/cli 更新到 3.x 之後,vue-cli 的包名從vue-cli 改成了 @vue/cli 如果之前全域性安裝了舊版本的vue-cli (1.x 或 2.x),首先需要使用以下命令解除安裝掉 // 如果沒有安裝舊版本的 vue-cli 可以跳過解除安裝直接

Vue (二)—— 元件之間的資料傳遞

Vue 的元件作用域都是孤立的,不允許在子元件的模板內直接引用父元件的資料。必須使用特定的方法才能實現元件之間的資料傳遞。 首先用 vue-cli 建立一個專案,其中 App.vue 是父元件,components 資料夾下都是子元件。 一、父元件向子元件傳遞資料

VUE 旅 -- 封裝一個簡單的獲取本地圖片並壓縮上傳的元件

平時專案開發中,獲取本地圖片並壓縮上傳是一個很常見的需求,最典型的就是修改使用者頭像功能,今天就來封裝一個可以到處通過的元件。 首先分析需求,要達到什麼效果呢? 點選後開啟檔案選擇器,選擇檔案 對獲取的圖片檔案壓縮 前端能夠預覽獲取到的圖片 將壓縮後的圖片

Vue (六)—— 使用 Vuex + axios 傳送請求

Vue 原本有一個官方推薦的 ajax 外掛 vue-resource,但是自從 Vue 更新到 2.0 之後,官方就不再更新 vue-resource 目前主流的 Vue 專案,都選擇 axios 來完成 ajax 請求,而大型專案都會使用 Vuex 來管理資料,所以這篇

Vue (八)—— 使用 Echarts 建立圖表

在後臺管理系統中,圖表是一個很普遍的元素。目前常用的圖示外掛有 charts,  Echarts, highcharts。這次將介紹 Echarts 在 Vue 專案中的應用。 一、安裝外掛 使用 cnpm 安裝 Echarts cnpm install echar

vue js 物件/陣列 賦值/拷貝 解決VUE中賦值引用後資料雙向改變的問題

淺拷貝這裡就不講了,我們直接講深拷貝 正常的陣列/物件拷貝可以直接用 const cloneObj = JSON.parse(JSON.stringify(Obj)); 這種方式可以解決相當多一部分的賦值問題,但是一些特殊屬性除外(undefined/function)

vue(八)----IOSSafari不兼容Javascript中的Date問題

找到 () 方案 ace 格式 nbsp 後臺 get repl 在IOS5以上版本(不包含IOS5)中的Safari瀏覽器能正確解釋出Javascript中的 new Date(‘2013-10-21‘) 的日期對象。 但是在IOS5版本裏面的Safar

react)--報錯output.path不是絕對路徑

bpa file 文件 開始 put pac 這就是 文件頭部 之前   之前,一直在糾結是學習angular好,學習vue好,還是學習react好,網上一搜索,也是各種對比,各種互噴,看過之後更糾結。就跟小時候一樣糾結長大了是上清華好,還是上北大好,最後證明我想多了。總之