首页 > 其他 > 详细

vue-cli4.x+部署vue2.x开发环境 引入iview

时间:2020-09-29 13:10:47      阅读:231      评论:0      收藏:0      [点我收藏+]

1.首先当然是安装nodejs,因为这边我已经装过了 所以就不再安装了 直接下一步下一步完成安装。

技术分享图片

 

2.get~安装完成后先测试一下是否在本地已经安装成功了,能出现下面这两个提示就说明安装已经成功了 

命令:npm -v  node-v

技术分享图片

 

 

 技术分享图片

 

3.接下来安装vuecli脚手架,因为我们实地在用的过程中不可能一直停留在低版本的脚手架版本,所以我们这边直接安装最新版本的vuecli 4.x 之后再到配置里选择制定的vue版本项目创建。

vuecli 3.x~4.x 的安装命令为 npm install -g @vue/cli  

技术分享图片

 

 

 安装中...

技术分享图片

 

 

 安装成功~

技术分享图片

 

 

测试一下是否安装成功

技术分享图片

 

 

 ok 完成安装

4.下一步开始创建vue项目

 vue create 你的项目名字(不能有大写和使用驼峰来命名) 

技术分享图片

 

 

 会出现下图

技术分享图片

 

 

这边可供选择的有vue2.X的项目和vue3.x的项目,第三项是基于3.0做自动配置 我们先跳过 直接选择2.0的项目建立起来 选择 vue2

安装中.... 耐心等待项目安装完成

 技术分享图片

 

 

 出现下图 说明已经安装成功

技术分享图片

 

 

 然后先不用着急运行 先cd到项目文件夹下 cd 你的项目名

技术分享图片

 

 

 将路径复制下来

技术分享图片

 

 

 复制到文件路径中打开

技术分享图片

 

 

 

 

 这样就到了文件目录中 

技术分享图片

 

下一步就是把项目拉倒我们的vscode中

技术分享图片

 

 

 这是项目结构

 技术分享图片

 

 

 选在集成终端中打开cmd 运行 npm install --save 安装一下包依赖

技术分享图片

 

 

 安装完成

技术分享图片

 

 

最后一步运行项目  npm run serve

技术分享图片

 

 

 ok 启动成功了 打开页面

技术分享图片

 

 

 接下来安装 i-view ui https://www.iviewui.com/docs/introduce 官方文档链接

官方文档已经明确指出 使用npm的方式来安装viewui  ok 照着做就行

 

技术分享图片

 

 

 在命令行输入 npm install view-design --save

技术分享图片

 

 

 安装完成

技术分享图片

 

 

 安装完成后我们需要到项目目录下的 main.js 文件里全局引入

依照官方文档 我们需要引入主js文件和css样式文件

import ViewUI from ‘view-design‘

import ‘view-design/dist/styles/iview.css‘

 

 

在引用到vue实例中

Vue.use(ViewUI)

技术分享图片

 

 

 ok 这样就完成安装了 下一步引入一个viewui的组件到 helloworld 页面里试试看~~

技术分享图片

 

 

保存 到页面里看一下效果

 

技术分享图片

 

 ok  没问题 这样子搭建vue2.x项目和iviewui框架的引入就完成了

 

 

vue-cli4.x+部署vue2.x开发环境 引入iview

原文:https://www.cnblogs.com/Lastly1999/p/13748569.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!