安裝cnpm
npm install -g cnpm --registry=完成準備工作
1、開始安裝腳手架工具vue-cli
開啟cmd,輸入以下命令,在全域性安裝vue-cli
方式一 npm install --global vue-cli方式二 cnpm install --global vue-cli
windows下:管理員進入cmd,進入指定資料夾,命令如下:
初始化專案,命令如下:
定位到專案資料夾
cd blogweb常見一些錯誤,一般都是依賴包沒安裝完,或者 eslint tests e2e選擇了yesnpm i //安裝所以的依賴包
npm run dev
處理方式(提示缺少那個模組,就安裝那個模組就ok了):
npm i webpack-dev-server專案安裝完成,執行專案。cd blogweb證明成功了!webpack 正在打包。npm run dev
專案檔案描述
先配置如下專案結構,這個純屬看團隊或者個人的愛好,沒有強制性規範
├src
├static 一般不頻繁修改,壓縮過的檔案,我們可以直接放裡面,可減少打包的時間
├── css 樣式
├── font 字型
├── image 檔案,大專案可精確到模組
├── login 比如登陸
└── js 指令碼
表現層
store/ - vuex 狀態管理
router/ - 前端路由
view/ - 各個業務頁面
component/ - 通用元件
業務層
service/ - 處理服務端返回的資料(類似data format),例如 service 同時呼叫了不同的api,把不同的返回資料整合在一起在統一傳送到 store 中
api 層
api/ - 請求資料,mock資料,反向校驗後端api
util 層
util/ - 存放專案全域性的工具函式
好,我們的第一步,已經順利完成了,下一步我們開始寫**。
vue cli入門(一) 專案搭建
vue cli作為一款mvvm框架語言 vue 的腳手架,整合了webpack環境及主要依賴,對於專案的搭建 打包 維護管理等都非常方便快捷。在開始專案之前,建議先熟悉vue.js基本語法。1.安裝node.js 檢驗是否安裝成功,在cmd輸入命令 node v,回車 及 npm v,回車,如出現下...
Vue cli入門(一) 專案搭建
vue cli入門 一 專案搭建 前言 vue cli是一款基於vue的專案腳手架工具,其整合了webpack環境和主要的依賴,對於我們的專案搭建 開發 打包 維護管理等都是非常的方便。主要內容 1 node.js安裝和配置環境 2 構建vue cli專案模板 安裝node.js本地環境 2 檢驗是...
vue 實戰筆記一專案準備
這是在網上找的乙個訂餐系統vue的實戰demo。下面是我在做這個專案時的筆記 一.專案準備 1.新建資料夾,用visual studio編輯器,開啟終端 ctrl 2.安裝腳手架工具 npm install vue cli g vue init webpack 安裝過程和基本專案結構貼圖 安裝過程中...