首先使用vue-cli创建新环境
- 安装node.js
- 安装vue-cli(注意,为了满足后面的配置,此处vue-cli 只能装 vue-cli2,不能装3)
- 安装过程要安装vue-router,不推荐安装eslint等检查工具(很严格)
安装semantic
- 全局安装gulp
npm install -g gulp
注意,gulp不能安装4.0版本,因为做了很多改动,否则会出现
gulp error: gulp.hasTask is not a function
的错误
而是应该装3.9.1版本
- 在项目目录下安装semantic-ui
npm install semantic-ui --save
安装内容如下
3. 构建semantic-ui
cd semantic
gulp build
到这里semantic-ui安装完毕,下面还要配置文件
配置semantic运行环境
semantic运行需要jquery
-
安装jquery
根目录下npm install jquery --save
-
安装依赖
npm install
-
修改vue-cli webpack配置文件
打开:根目录/build/webpack.dev.conf.js
在plugins里加上new webpack.ProvidePlugin({ // jquery $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' })
-
import semantic 包
import '../semantic/dist/semantic.min.css' import '../semantic/dist/semantic.min.js'
然后就能愉快得使用vue+semantic啦!