npm install慢解決方法:刪掉nodel_modules。
5.0.3:表示安裝指定的5.0.3版本
~5.0.3:表示安裝5.0X中最新的版本
^5.0.3: 表示安裝5.x.x中最新的版本。
yarn的優(yōu)點(diǎn):
1.速度快,可以并行安裝
2.安裝版本統(tǒng)一
項(xiàng)目搭建:
- 安裝nodejs
- 查看node版本:node -v
- 安裝vue clie : npm install -g @vue/cli
- 查看vue版本:vue -V
- 使用vue ui 搭建項(xiàng)目:
-
cd?E:\work\gitee\vue-backend-1 vue create?vue-backend-1 選擇vue2 [等待即可] 運(yùn)行:npm run serve,瀏覽器可訪問localhost:8080 學(xué)習(xí)餓了么UI:?Element - The world's most popular Vue UI framework 項(xiàng)目安裝餓了么UI依賴:npm i element-ui -S 引用element-UI:main.js引入3行代碼[全局引用]
簡(jiǎn)單使用element-ui:拷貝代碼到項(xiàng)目中,運(yùn)行試試效果
npm run server:
按需引用:安裝插件
修改配置文件:
vue 頁面有el-row,el-button 組件:
所以main按需引用就是把Row和button 引入
配置文件第4行需要修改為:
["@babel/preset-env", { "modules": false }]
項(xiàng)目啟動(dòng):npm run server 發(fā)現(xiàn)效果等同于全局引用
總結(jié):按需引用的好處是使項(xiàng)目體積變小
項(xiàng)目打包:npm run build,?打包后會(huì)多一個(gè)dist文件,項(xiàng)目發(fā)布也是發(fā)布的dist文件
vue Router路由學(xué)習(xí):Vue Router | Vue.js 的官方路由 查看npm 里面的router 版本:router - npm search
安裝vue-router:?npm i vue-router@3.6.5
?在src 下創(chuàng)建router文件夾和index.js 文件,并啟用router
創(chuàng)建views文件夾,同時(shí)在下面創(chuàng)建兩個(gè)組件
在router 文件夾中的index 引入組件
在main.js中引入路由,配置路由[第11行第21行]:
啟動(dòng)項(xiàng)目報(bào)錯(cuò)npm run server:是因?yàn)榇a規(guī)范問題,關(guān)閉即可
關(guān)閉代碼校驗(yàn)開關(guān):
配置路由出口:文章來源地址http://www.zghlxwxcb.cn/news/detail-692481.html
重新啟動(dòng)即可:npm run server
嵌套路由學(xué)習(xí)[引入組件Main,修改嵌套路由組件]:
文章來源:http://www.zghlxwxcb.cn/news/detail-692481.html
配置路由出口:
到了這里,關(guān)于vue從零開始學(xué)習(xí)的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!