vue--1 創建項目及詳解
1、需要的基礎依賴
- 安裝Node.js
- VueCLI 安裝:npm install -g @vue/cli 或者 yarn global add @vue/cli
- 安裝指定版本:npm install -g @vue/cli@4.5.9
- 查看安裝的版本:vue --version
- 查看當前鏡像網址:npm get registry
- 使用淘寶鏡像: npm config set registry http://registry.npm.taobao.org
2、創建vue項目 vue create web
- 選擇 Myaually select features
- 選擇TypeScript,Router,VueX
- 選擇3.x
- 選擇n,n,y
- 選擇ESlint with error prevention only
- 選擇Lint on save
- In dedicated config files
- y
- 輸入項目名稱
- 創建項目 loading
3、項目結構
- node_modules 存放項目依賴
- public 目錄存放靜態資源,不會經過打包處理,一般不要作為開發項目文件
- public/index.html 項目首頁,在構建時所有資源鏈接自動注入
- src 項目源文件
- src/asster 項目資源,如js,css,圖片
- src/components 組件文件
- src/App.vue 項目入口文件
- src/main.js 項目入口js,相當于java的main方法
- package.json 項目信息及相應依賴
- package-lock.json 鎖定當前項目信息及項目依賴版本,主要用于協同開發時鎖定依賴的版本
- 啟動過程 npm run serve --> index.html-->main.js--App.vue--渲染App.vue掛在的組件
4、vue文件頁面結構
- template html定義區,包含HTML,vue標簽及指令,第三方UI框架標簽等
- script vue邏輯代碼區,是頁面核心部分
- import 引入外部模塊
- export default 導出本模塊(導出才能別的模塊使用)
- name 組件名稱
- props 接受父組件傳遞的屬性及參數
- data() 頁面數據存儲區
- methods 方法定義區
- style 樣式定義區
創作不易,轉摘請標明出處。如果有意一起探討測試相關技能可加博主QQ 771268289 博主微信:ding17121598
本文來自博客園,作者:怪圣卡杰,轉載請注明原文鏈接:http://www.rzrgm.cn/dwdw/p/16767505.html
浙公網安備 33010602011771號