常见的vue技术栈组件库
● 移动端(Vant, Cube-UI, NutUI )
● PC端 ( element-ui, Ant Design of Vue, iView)
● 小程序: uniapp
打开cmd窗口,用vue create 创建项目
vue create element-demo
-------------------------------
? Please pick a preset:
> Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
//1. vue create 命令会自动创建文件夹,这样就不需要我们手动创建了
//2. 选择Vue2 版本的默认配置
//3. 如果vue create 命令不能正常运行,要先安装脚手架工具, 对应的命令是: npm i -g @vue/cli
//上一步的命令做了两件事:创建文件夹,把示例项目的代码下载到这个文件夹中,为了运行项目,我们还需要进入项目目录下,并运行命令。 对应的命令是:
cd element-demo # 进入项目目录
npm run serve # 运行命令
//查看效果
npm i element-ui -S
//-S: 是--save的简写,表示 这个包是生产依赖, 表示项目上线也要使用这个包。
//-S: 是可以省略不写的。
// 如果要安装开发依赖,则要加 -D。
//www.yuque.com/fanrenjinjie/vue/xtt68s
//引入路由
npm i vue-router
**没有配置的项目**
定义src/router/index.js
```cpp
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/login', component: Login }
]
})
export default router
引入路由src/main.js中引入
// 省略其他
import router from '@/router/index.js'
new Vue({
+ router,
render: h => h(App),
}).$mount('#app')
总结
- elementui是做PC项目的首选
- 组件库一般都会有配套使用教程,基本套路是:
a. npm i 安装
b. 在main.js中导入,并使用
main.js中引入并注册
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
**BUG修复
描述:
选中其他的菜单,刷新页面,发现默认选中的菜单不对!
解决
:default-active="$route.path"**