A starter kit for Mint UI generated by vue-cli
尽管是个做后端的,但总有写小想法需要用到前端框架来快速实现,这次总算把minit-ui调出来了。特做以下记录,防止下次再走弯路:
弄成功之前,总觉得太难,每次都是一步之遥,但做完了之后感觉很简单了 在部署了很多次webpack都没成功,其实也可以直接引用js和css文件,直接开始用
- 从https://github.com/mint-ui/mint-ui-starter fork项目,得到脚手架
- 进入项目目录,下载依赖(若提示出错,多半是版本太低,升级node、npm即可)
cd mint-ui-starter npm install
- 运行项目
npm run dev
mint-ui-starter项目中,已经有一些的依赖,在需用axios时,需要自己配置
npm install axios -D // 会下载此插件,并加入此项目,即加入了package.json文件
上面命令中,-D是一个简写
如:npm i axios -D
代表的是 npm install axios --save-dev
// i -> install
// D -> --save-dev
// S -> --save
- 创建mybutton.vue文件
- 在App.vue script部分注册components
- 在App.vue template部分引用
mounted() {
// this.getData();
console.log("welecome to vue");
}
README.md是项目根目录的数据,可以直接读取
axios.get("README.md")
.then(function(res){
alert(res.data);
console.log(res);
}.bind(this)).catch(function(err){
console.log(err);
});
- 修改
.gitignore
文件中的/dist/
记录,让dist发布的目录能够提交 - 修改
index.html
文件中的js为相对路径<script src="./dist/build.js"></script>
- 保证
webpack.config.js
文件中publicPath
路径也为相对路径,如下:
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: './dist/',
filename: 'build.js'
}
- 再使用
npm run build
编译,然后提交代码到github,再在项目Settings
选项中开启Github Pages即可正常访问
若访问失败,则多看看相对路径,
Crtl
+U
看浏览器中打开的index.html
文件的源码,点击build.js
,把此路径按上面步骤修改正常即可
- 为什么文档中使用的是Toast(),而在Demo项目中使用的是this.$toast(); 答:因为webpack.config.js配置了一个参数
resolve: {
alias: {
'vue$': 'vue/dist/vue'
}
},
-
做配置时候,引入css、字体、js等,都需要有对应的loader,然后webpack配置中,需要注意其对应的位置
-
建议按需导入组件,在学习时可以全部导入
-
自己编写的模块,在使用@click事件时,需要加上native