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


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框架的引入就完成了

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM