【1】vue/cli 3.0 脚手架 及cube-ui 安装

时间:2024-08-26 11:37:20

安装

  • Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

    检查node版本:

    $ node -v
    v8.9.3

  • 关于旧版本

    Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),

    通过 npm uninstall vue-cli -g  卸载它。

  • 安装vue-cli3

    【1】vue/cli 3.0 脚手架 及cube-ui 安装

    【1】vue/cli 3.0 脚手架 及cube-ui 安装

    【1】vue/cli 3.0 脚手架 及cube-ui 安装

    npm install -g @vue/cli

     装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

    检查其版本是否正确 (3.x):vue --version

创建项目 

    【1】vue/cli 3.0 脚手架 及cube-ui 安装

    vue create vue-sell-cube  【vue-sell-cube】是项目名称


进入项目

       cd vue-sell-cube 


运行项目

    npm run serve

运行成功

【1】vue/cli 3.0 脚手架 及cube-ui 安装

项目简单多了

【1】vue/cli 3.0 脚手架 及cube-ui 安装

node_modules 底层依赖webpack 配置

【1】vue/cli 3.0 脚手架 及cube-ui 安装

入口html在文件夹【public】- 【index.html】

【1】vue/cli 3.0 脚手架 及cube-ui 安装

源码都在文件夹【src】中,入口js是main.js; 入口html会加载main.js,main.js 会对vue初始化

【1】vue/cli 3.0 脚手架 及cube-ui 安装

安装vue-cli-plugin-cube-ui

  https://github.com/cube-ui/vue-cli-plugin-cube-ui

  命令:vue add cube-ui

【1】vue/cli 3.0 脚手架 及cube-ui 安装

以上安装内容说明见官网:https://github.com/cube-ui/cube-template/wiki 

安装成功后文件会被部分修改,如下:

cube-ui.js是引入cube-ui的所有组件,后续开发成功后可以删除不必要的组件

theme.styl 是所有组件的颜色

【1】vue/cli 3.0 脚手架 及cube-ui 安装

package.json

【1】vue/cli 3.0 脚手架 及cube-ui 安装    【1】vue/cli 3.0 脚手架 及cube-ui 安装

main.js

【1】vue/cli 3.0 脚手架 及cube-ui 安装

 前后端分离 - 接口 - 见【Mock数据】- 模拟访问数据