/mint-ui-starter

Demo

Primary LanguageVue

minit-ui 入门教程

A starter kit for Mint UI generated by vue-cli

尽管是个做后端的，但总有写小想法需要用到前端框架来快速实现，这次总算把minit-ui调出来了。特做以下记录，防止下次再走弯路：

部署 ：

弄成功之前，总觉得太难，每次都是一步之遥，但做完了之后感觉很简单了 在部署了很多次webpack都没成功，其实也可以直接引用js和css文件，直接开始用

  1. 从https://github.com/mint-ui/mint-ui-starter fork项目，得到脚手架

git clone https://github.com/mint-ui/mint-ui-starter

  1. 进入项目目录，下载依赖（若提示出错，多半是版本太低，升级node、npm即可）

cd mint-ui-starter npm install

  1. 运行项目

npm run dev

学习到的知识点：

1. 使用新的插件库

mint-ui-starter项目中，已经有一些的依赖，在需用axios时，需要自己配置

npm install axios -D // 会下载此插件，并加入此项目，即加入了package.json文件

2. 命令简写

上面命令中，-D是一个简写

如：npm i axios -D 代表的是 npm install axios --save-dev

// i -> install

// D -> --save-dev

// S -> --save

3. 添加自定义的模块（见mybutton模块）

  • 创建mybutton.vue文件
  • 在App.vue script部分注册components
  • 在App.vue template部分引用

4. 使用启动时就加载某功能时，使用vue的mounted方法，和method有些不同，是一个函数而不是一个对象

  mounted() {
    // this.getData();
    console.log("welecome to vue");
  }

5. 使用axios请求数据时的目标

README.md是项目根目录的数据，可以直接读取

     axios.get("README.md")
      .then(function(res){
        alert(res.data);
        console.log(res);
      }.bind(this)).catch(function(err){
        console.log(err);
      });

6. 使用Github Pages发布服务

  • 修改.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，把此路径按上面步骤修改正常即可

FAQ：

  1. 为什么文档中使用的是Toast()，而在Demo项目中使用的是this.$toast(); 答：因为webpack.config.js配置了一个参数
 resolve: {
    alias: {
      'vue$': 'vue/dist/vue'
    }
  },

  1. 做配置时候，引入css、字体、js等，都需要有对应的loader，然后webpack配置中，需要注意其对应的位置

  2. 建议按需导入组件，在学习时可以全部导入

  3. 自己编写的模块，在使用@click事件时，需要加上native