VUE項目初建和常見問題有哪些

這篇文章將為大家詳細講解有關VUE項目初建和常見問題有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

拿貓眼為例:

步驟:

需要預裝node.js

1. 查看node版本,控制臺輸入

node -v
v10.16.1

2. 查看vue版本

vue -V (Vue不是內部或外部命令...)--執行步驟3

3. 安裝@vue/cli腳手架

npm i -g @vue/cli

4. 創建新項目

vue create maoyan
1.Please pick a preset:
Manually select features

Check the features needed for your project:(上下鍵移動, 空格鍵選擇, 選完之后按回車確定)
Babel Router Vuex CSS Pre-processors

Use history mode for router?
y

Pick a CSS pre-processor
Sass/SCSS(width node-sass)

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
In package.json

5. 進入項目目錄下, 并啟動服務

cd maoyan 進入項目目錄
npm run serve 啟動服務

6. 重置樣式

• 5-1. 輸入命令安裝reset.css: npm install reset.css --save

• 5-2. 在main.js文件中引入使用: import 'reset.css'

7. 獲取數據時, 需要先設置代理進行跨域

7-1. 新建vue.config.js文件, 配置代理

module.exports = {
devServer: { //使用web服務器啟動
port: 8888, //指定端口號
proxy: { //設置代理(解決跨域)
"/ajax": {
target: "http://m.maoyan.com",
changeOrigin: true
}
}
},
}

7-2. 使用axios進行數據獲取(axios是對ajax進行封裝的插件)

7-2-1. 安裝: npm i axios -S

7-2-2. 在main.js文件中引入: import axios from 'axios'

7-2-3. 在main.js文件中, 將axios聲明到Vue的原型使用: Vue.prototype.$http = axios

7-2-4. 獲取數據: this.$http.get(url)

報錯問題:

1.These dependencies were not defined 下面這些依賴找不到

可能出現的情況分為兩種:

a. 本地文件路徑寫錯了

@/components/comon/header.vue in ./node_module........

解決: 對應報錯, 排查路徑問題(查看在哪些文件引入了header.vue文件, 路徑在哪個文件中寫錯了)

@/components/commons/header.vue

b. 需要通過npm安裝的依賴沒有安裝, 直接引用

axios in ./src/main.js is not defined

解決: 對應報錯, 查看package.json文件, 看是否安裝過此依賴

b-1. 如package.json存在該依賴, 則可能是由于網絡原因, 丟包了

刪除node_modules文件夾, 重新npm i 進行安裝依賴

b-2. 如package.json不存在該依賴, 則重新安裝

npm i axios -S

項目結構:

maoyan

--dist 打包后的文件夾
--node_modules 所有依賴包管理
--public 圖標和index.html頁面(為了寫vue實例掛載的容器)
--src 管理所有資源
--assets 圖標,圖片,靜態資源
--components 寫組件
--style 存放css文件
--views 寫頁面

App.vue 應用的主組件(將首頁內容渲染到掛載節點)--詳情見main.js[通過渲染函數渲染App.vue, 掛載到#app]

main.js 相當于webpack的入口文件, 在此管理所有的引入, 全局可使用

router.js 配置路由（所有需要進行路由配置的組件， 需要通過import先引入進來）

store.js vuex狀態管理器

.gitignore 上傳git倉庫時配置需要被忽略的文件

babel.config.js 將ES高版本轉為ES5

package.json 可自定義命令, 管理依賴包的版本號

關于“VUE項目初建和常見問題有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。