采用实战模式并结合ElementUI 组件库,将所需知识点应用到实际中,以最快速度掌握Vue的使用;
桌面化应用 ElementUI: https://element.eleme.cn/#/zh-CN/
弹窗 LayUI 的 layer (由于官网已下架,在此使用镜像): https://www.layui.site/
创建工程
注意:命令行都要使用管理员模式运行
1、创建一个名为hello-vue的工程vue init webpack hello-vue
2、安装依赖,我们需要安装vue-router、 element-ui、 sass-loader和node-sass四个插件
//进入工程目录
cd he11o-vue
//安装vue-router
npm install vue-router --save-dev
//安装element-ui
npm i element-ui -S
//安装依赖
npm install
//安装 SASS加载器 ,如果npm安装失败,就用cnpm
cnpm install sass-loader node-sass --save-dev
//启动测试
npm run dev
3、Npm命令解释:
● npm install moduleName :安装模块到项目目录下
● npm install -g moduleName : -g 的意思是将模块安装到全局,具体安装到磁盘哪个位置,要看npm config prefix的位置
● npm install -save moduleName : --save 的意思是将模块安装到项目目录下,并在
package文件的dependencies节点写入依赖,-S为该命令的缩写
● npm install -save-dev moduleName: --save-dev的意思是将模块安装到项目目录下,并在package文件的devDependencies节点写入依赖,-D(开发者)为该命令的缩写
路由嵌套
嵌套路由又称子路由,在实际应用中,通常由多层嵌套的组件组合而成。同样地,URL中各段动态路径也按某种结构对应嵌套的各层组件,例如: