前端架構之初始化vue 2 x專案

2021-10-03 19:26:48 字數 2835 閱讀 6687

1. 檢查是否安裝node.js執行環境

//終端輸入


node -v
2. 檢查是否安裝npm和cnpm包管理程式

//終端輸入


npm -v


cnpm -v  // **映象專用通道
3. 檢查是否安裝webpack構建工具

//終端輸入


webpack -v // 這個必須是專案裡有安裝，然後到專案目錄下才能用這個命令檢查版本


npm webpack -v // 注意這是查詢安裝全域性的webpack
4. 檢查是否安裝vue-cli手腳架

npm install vue  // 安裝vue


//終端輸入，這裡是大寫的"v"


確定以上環境都沒問題後，那麼我們就往前走，構建專案開始。


第一步：直接在code目錄（本人**專案習慣）右鍵選擇git bash here(本著已安裝git)你們看著辦


第二步：在終端開始安裝命令


//終端輸入,"project"是專案名稱,大家隨意，不要中文就行


vue init webpack project


administrator/d/code


$ vue init webpack project--------------------- 安裝專案命令


? project name (project) --------------------- 專案名稱


? project name project


? project description (a vue.js project)--------------------- 專案描述


? project description a vue.js project


? author  xiaomai--------------------- 建立專案人


? author xiaomai


? vue build standalone


? install vue-router? (y/n) y --------------------- 是否安裝路由，一般都是裝


? install vue-router? yes


? use eslint to lint your code? (y/n) n--------------------- 是否開啟嚴格**編寫格式eslint，新手建議不用


? use eslint to lint your code? no


? set up unit tests (y/n) y--------------------- 設定單元測試，這裡你可以選擇n


? set up unit tests yes


? pick a test runner (use arrow keys)


? pick a test runner karma--------------------- 直接回車就好


? setup e2e tests with nightwatch? (y/n) y


? setup e2e tests with nightwatch? yes


? should we run `npm install` for you after the project has been created? (recom


mended) (use arrow keys)


> yes, use npm--------------------- 一般直接回車就好


yes, use yarn


no, i will handle that myself


開啟根目錄下的package.json你會看到vue依賴版本2.x


如果需要1.0版本終端命令：vue init webpack#1.0 project


別問我是不是3.x同理建立，別逗了，暫時只有2.x和1.x，反正換成3你也建立不了，可以說3.x需要參考其他具體教程


開啟根目錄下的package.json你會看到vue依賴版本1.x


第三步：啟動專案


1. 進入專案目錄


cd project
如果沒有安裝依賴就執行這一段命令，否則請忽略這段


npm i
2. 進入專案目錄


3. 瀏覽器輸入以上截圖紅色框起來的位址
				
Vue 1 前端專案初始化
安裝nodejs 安裝lts穩定版本 安裝vscode 修改源 npm config set registry 安裝vue npm install g vue cli 檢視vue的版本資訊，出現以下說明安裝成功 進入命令列輸入 vue ui 2.進入建立頁面 建立新專案 選擇檔案路徑 資料夾名稱 選...

				
Django之初始化專案結構
初始化專案結構 目錄4.重寫django預設認證使用者模型 1.整體結構解析 2.目錄結構 3.建立user模型 3.1建立使用者模型user python 3.2在setting.py 中註冊user模型 第一步 3.3 syl urls.py新增主路由 第二步 urlpatterns path ...

				
Django之初始化專案結構
初始化專案結構 目錄4.重寫django預設認證使用者模型 1.整體結構解析 2.目錄結構 root dev shiyanlou project workon syl syl root dev shiyanlou project cd aaa shiyanlou project syl root d...