vue--1 創建項目及詳解

1、需要的基礎依賴

1. 安裝Node.js
2. VueCLI 安裝：npm install -g @vue/cli  或者 yarn global add @vue/cli
3. 安裝指定版本：npm install -g @vue/cli@4.5.9
4. 查看安裝的版本:vue --version
5. 查看當前鏡像網址：npm get registry
6. 使用淘寶鏡像： npm config set registry http://registry.npm.taobao.org

2、創建vue項目 vue create web

1. 選擇 Myaually select features
2. 選擇TypeScript，Router，VueX
3. 選擇3.x
4. 選擇n，n，y
5. 選擇ESlint with error prevention only
6. 選擇Lint on save
7. In dedicated config files
8. y
9. 輸入項目名稱
10. 創建項目 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 樣式定義區