這篇文章將為大家詳細(xì)講解有關(guān)VUE項(xiàng)目初建和常見問(wèn)題有哪些，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
拿貓眼為例:
步驟:
需要預(yù)裝node.js
1. 查看node版本,控制臺(tái)輸入
node -v v10.16.1
2. 查看vue版本
vue -V (Vue不是內(nèi)部或外部命令...)--執(zhí)行步驟3
3. 安裝@vue/cli腳手架
npm i -g @vue/cli
4. 創(chuàng)建新項(xiàng)目
vue create maoyan 1.Please pick a preset: Manually select features Check the features needed for your project:(上下鍵移動(dòng), 空格鍵選擇, 選完之后按回車確定) 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. 進(jìn)入項(xiàng)目目錄下, 并啟動(dòng)服務(wù)
cd maoyan 進(jìn)入項(xiàng)目目錄 npm run serve 啟動(dòng)服務(wù)
6. 重置樣式
5-1. 輸入命令安裝reset.css: npm install reset.css --save
5-2. 在main.js文件中引入使用: import 'reset.css'
7. 獲取數(shù)據(jù)時(shí), 需要先設(shè)置代理進(jìn)行跨域
7-1. 新建vue.config.js文件, 配置代理
重慶分公司
重慶分公司
module.exports = {
devServer: { //使用web服務(wù)器啟動(dòng)
port: 8888, //指定端口號(hào)
proxy: { //設(shè)置代理(解決跨域)
"/ajax": {
target: "http://m.maoyan.com",
changeOrigin: true
}
}
},
}7-2. 使用axios進(jìn)行數(shù)據(jù)獲取(axios是對(duì)ajax進(jìn)行封裝的插件)
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. 獲取數(shù)據(jù): this.$http.get(url)
報(bào)錯(cuò)問(wèn)題:
1.These dependencies were not defined 下面這些依賴找不到
可能出現(xiàn)的情況分為兩種:
a. 本地文件路徑寫錯(cuò)了
@/components/comon/header.vue in ./node_module........
解決: 對(duì)應(yīng)報(bào)錯(cuò), 排查路徑問(wèn)題(查看在哪些文件引入了header.vue文件, 路徑在哪個(gè)文件中寫錯(cuò)了)
@/components/commons/header.vue
b. 需要通過(guò)npm安裝的依賴沒有安裝, 直接引用
axios in ./src/main.js is not defined
解決: 對(duì)應(yīng)報(bào)錯(cuò), 查看package.json文件, 看是否安裝過(guò)此依賴
b-1. 如package.json存在該依賴, 則可能是由于網(wǎng)絡(luò)原因, 丟包了
刪除node_modules文件夾, 重新npm i 進(jìn)行安裝依賴
b-2. 如package.json不存在該依賴, 則重新安裝
npm i axios -S
項(xiàng)目結(jié)構(gòu):
maoyan
--dist 打包后的文件夾
--node_modules 所有依賴包管理
--public 圖標(biāo)和index.html頁(yè)面(為了寫vue實(shí)例掛載的容器)
--src 管理所有資源
--assets 圖標(biāo),圖片,靜態(tài)資源
--components 寫組件
--style 存放css文件
--views 寫頁(yè)面
App.vue 應(yīng)用的主組件(將首頁(yè)內(nèi)容渲染到掛載節(jié)點(diǎn))--詳情見main.js[通過(guò)渲染函數(shù)渲染App.vue, 掛載到#app]
main.js 相當(dāng)于webpack的入口文件, 在此管理所有的引入, 全局可使用
router.js 配置路由（所有需要進(jìn)行路由配置的組件， 需要通過(guò)import先引入進(jìn)來(lái)）
store.js vuex狀態(tài)管理器
.gitignore 上傳git倉(cāng)庫(kù)時(shí)配置需要被忽略的文件
babel.config.js 將ES高版本轉(zhuǎn)為ES5
package.json 可自定義命令, 管理依賴包的版本號(hào)
關(guān)于“VUE項(xiàng)目初建和常見問(wèn)題有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
